Welcome Dialog

Welcome to the Community!

We have a brand new look! Take a tour with us and explore the latest updates on Adobe Support Community.


Image size and position changes when adde div. Why?

Engaged ,
Jan 01, 2020 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

TOPICS
How to, Performance

Views

477

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
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Jan 01, 2020 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://pi...

Likes

Translate

Translate
Adobe Community Professional ,
Jan 01, 2020 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>

 

 

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
community guidelines
Engaged ,
Jan 01, 2020 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
community guidelines
Adobe Community Professional ,
Jan 01, 2020 Jan 01, 2020

Copy link to clipboard

Copied

LATEST

Sorry, that was a typo, it should read

border: 1px solid #CCC;

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
community guidelines
LEGEND ,
Jan 01, 2020 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
community guidelines