Copy link to clipboard
Copied
I have in style made a div ID container with autosize. But wwhen I add that to the images they change size and position. I have sat the images to 15% in size, but they get much smaller !
How do I avoid that?
Try:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
.container {
border: 1px so;
id #CCC;
width: 15%;
display: inline-block;
overflow: hidden;
}
img:hover {
transform: scale(2);
transition: 2s ease;
}
img {
transition: 1s ease-out;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<img src="https://pi
...
Copy link to clipboard
Copied
Try:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
.container {
border: 1px so;
id #CCC;
width: 15%;
display: inline-block;
overflow: hidden;
}
img:hover {
transform: scale(2);
transition: 2s ease;
}
img {
transition: 1s ease-out;
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<img src="https://picsum.photos/200"></img>
</div>
<div class="container">
<img src="https://picsum.photos/200">
</div>
<div class="container">
<img src="https://picsum.photos/200">
</div>
<div class="container">
<img src="https://picsum.photos/200">
</div>
</body>
</html>
Copy link to clipboard
Copied
Thank you, but still the same. What does so; mean?
Copy link to clipboard
Copied
Sorry, that was a typo, it should read
border: 1px solid #CCC;
Copy link to clipboard
Copied
I guess what you want is to set the images to be 100% width, otherwise currently they are 15% of the container width.