Highlighted

Image size and position changes when adde div. Why?

Engaged ,
Jan 01, 2020

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?
Skjermbilde 2020-01-01 kl. 13.17.01.pngSkjermbilde 2020-01-01 kl. 11.11.01.pngSkjermbilde 2020-01-01 kl. 13.25.22.png

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

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>

 

 

Topics

How to, Performance

Views

355

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Image size and position changes when adde div. Why?

Engaged ,
Jan 01, 2020

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?
Skjermbilde 2020-01-01 kl. 13.17.01.pngSkjermbilde 2020-01-01 kl. 11.11.01.pngSkjermbilde 2020-01-01 kl. 13.25.22.png

Adobe Community Professional
Correct answer by BenPleysier | Adobe Community Professional

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>

 

 

Topics

How to, Performance

Views

356

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Jan 01, 2020

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>

 

 


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Engaged ,
Jan 01, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Jan 01, 2020

Copy link to clipboard

Copied

Sorry, that was a typo, it should read

border: 1px solid #CCC;

Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Jan 01, 2020

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...