Image size and position changes when adde div. Why?

Report · Jan 01, 2020

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?

Report · Jan 01, 2020

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>

Wappler, the only real Dreamweaver alternative.

Report · Jan 01, 2020

Thank you, but still the same. What does so; mean?

Report · Jan 01, 2020

Sorry, that was a typo, it should read

border: 1px solid #CCC;

Wappler, the only real Dreamweaver alternative.

Report · Jan 01, 2020

I guess what you want is to set the images to be 100% width, otherwise currently they are 15% of the container width.

Adobe Community

Image size and position changes when adde div. Why?

1 Correct answer