How to readjust the image to the size of the div

Question

How to readjust the image to the size of the div

Asked 7 years, 2 months ago

Viewed 3,621 times

2

This image has 500px x 500px and the div has 600px x 600 px
How can I treat the image to be the same size as the div?

			#conteudo{
				width:600px;
				height:600px;
				float:left;
				background-color:#ff1;	
				display: initial;
				margin: auto;
				z-index: 6;
				overflow: hidden;
			}

<html>
  <body>
		<div id='conteudo'> 
			<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Hazard_X.svg/500px-Hazard_X.svg.png">
		</div>
	</body>
</html>

3 answers

4

You can use the child selector >, thus #conteudo > img and apply width and height with 100%;, so it will only affect the image that is direct child of #conteudo

Example:

#conteudo{
    width:600px;
    height:600px;
    float:left;
    background-color:#ff1;  
    display: initial;
    margin: auto;
    z-index: 6;
    overflow: hidden;
}
#conteudo > img {
    width: 100%;
    height: 100%;
}

<div id='conteudo'> 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Hazard_X.svg/500px-Hazard_X.svg.png">
</div>

The image may get distorted so you can choose to use 100% only at height or width, which will not fill, to fill everything or distort the image (if it is more rectangular than the "parent" element) or else must exceed the width or height, for example see how it gets distorted:

#conteudo{
    width:600px;
    height:600px;
    float:left;
    background-color:#ff1;  
    display: initial;
    margin: auto;
    z-index: 6;
    overflow: hidden;
}
#conteudo > img {
    width: 100%;
    height: 100%;
}

<div id='conteudo'> 
    <img src="https://upload.wikimedia.org/wikipedia/commons/f/f7/Stack_Overflow_logo.png">
</div>

Fill in and maintain the ratio

To exceed the size and still be able to maintain the ratio can use min-width and min-heigth, for example:

#conteudo{
    width:600px;
    height:600px;
    float:left;
    background-color:#ff1;  
    display: initial;
    margin: auto;
    z-index: 6;
    overflow: hidden;
}
#conteudo > img {
    min-width: 100%;
    min-height: 100%;
}

<div id='conteudo'> 
    <img src="https://upload.wikimedia.org/wikipedia/commons/f/f7/Stack_Overflow_logo.png">
</div>

This way will maintain the proportion of the image size in relation to the "parent" element without distorting.

Background-sized

CSS has a property called background-size, which allows you to adjust the background size

background-size: cover

It will adjust until it takes over

#conteudo{
    width:600px;
    height:600px;
    float:left;
    display: initial;
    margin: auto;
    z-index: 6;
    overflow: hidden;

    background:#ff1 url(https://upload.wikimedia.org/wikipedia/commons/f/f7/Stack_Overflow_logo.png) no-repeat; /*aplica a imagem*/
    background-size: cover; /*Ajusta o tamanho para "cobrir"*/
}

<div id='conteudo'>Olá mundo</div>

background-size: contain

Will adjust to occupy width or height

#conteudo{
    width:600px;
    height:600px;
    float:left;
    display: initial;
    margin: auto;
    z-index: 6;
    overflow: hidden;

    background:#ff1 url(https://upload.wikimedia.org/wikipedia/commons/f/f7/Stack_Overflow_logo.png) no-repeat; /*aplica a imagem*/
    background-size: contain; /*Ajusta o tamanho para "cobrir"*/
}

<div id='conteudo'>Olá mundo</div>

the way you gave me gave it right !! would have how to do with a background?!

– Mateus Alcântara

2017/09/19 at 19:15
@Mateusalcântara has yes, one minute

– Guilherme Nascimento

2017/09/19 at 19:16
Thanks in advance

– Mateus Alcântara

2017/09/19 at 19:17
@Mateusalcântara edited the answer

– Guilherme Nascimento

2017/09/19 at 19:20
Thank you Guilherme, but in my case the background has not worked yet, when I click on an image and it is opened inside the background, it is a space " left "

– Mateus Alcântara

2017/09/19 at 19:46
@Mateusalcântara you saw that are two example, one with cover and the other with contain né?

– Guilherme Nascimento

2017/09/19 at 19:47
Yes, I noticed, I tested with both

– Mateus Alcântara

2017/09/19 at 19:51
@Mateusalcântara sends the link of your site to see

– Guilherme Nascimento

2017/09/19 at 19:52
You’re not staying yet, I can send you some other way?

– Mateus Alcântara

2017/09/19 at 20:01
@Mateusalcântara knows how to use https://codepen.io/pen/?

– Guilherme Nascimento

2017/09/19 at 20:08
@Mateusalcântara I think you do not understand how to use the codepen, It is not just going out pasting the codes. :(

– Guilherme Nascimento

2017/09/19 at 20:16
@Mateusalcântara so I asked if you knew how to use codepen, it shows that you do not know. That’s what I wanted to know. There’s a way to send the images, but it’s kind of hard to explain. Do the following, evnia the HTML+css+images via Dropbox or googledrive and send me the link to download here in the comments.

– Guilherme Nascimento

2017/09/19 at 20:25
https://drive.google.com/open?id=0B7BMqcQw2lmWbjV4eGZ2d2VXN2c

– Mateus Alcântara

2017/09/19 at 20:30
@Mateusalcântara change of background:#ff1 url(images/J2.png); for background:#ff1 url(../images/J2.png); and change from <div class="conteudo" id="conteudo" ondrop="drop(event)" ondragover="allowDrop(event)" style="background:#fff"> for <div class="conteudo" id="conteudo" ondrop="drop(event)" ondragover="allowDrop(event)">

– Guilherme Nascimento

2017/09/19 at 21:05

Show 9 more comments

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.

by Lennon S. Bueno • **2,182** points · Answer 1 · 2017-09-19T19:56:52+00:00

#conteudo{
				width:600px;
				height:600px;
				float:left;
				background-color:#ff1;	
				display: initial;
				margin: auto;
				z-index: 6;
				overflow: hidden;
			}

<html>
  <body>
		<div id='conteudo'> 
			<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Hazard_X.svg/500px-Hazard_X.svg.png" width="600" height="600">
		</div>
	</body>
</html>

you can put the size and height right into the image, by the css height and width 100%.

by MagicHat • **12,262** points · Answer 2 · 2017-09-19T18:36:07+00:00

0

You can put to the element img, occupy 100% of height and length.

#conteudo{
width:600px;
height:600px;
float:left;
background-color:#ff1;  
display: initial;
margin: auto;
z-index: 6;
overflow: hidden;
}
img{height:100%; width:100%;}<--------------

there is some way to leave inside the contents div, only?

– Mateus Alcântara

2017/09/19 at 18:51
Yes, it worked, thank you very much for your help

– Mateus Alcântara

2017/09/19 at 19:18
img{ will affect all elements outside the #conteudo.

– Guilherme Nascimento

2017/09/19 at 19:21
@Mateusalcântara as commented by Guilherme if you want it to be applied only in this image you can do: #conteudo img{...}, consider validating one of the answers by clicking on the green icon below the evaluation arrows, good luck! ;)

– MagicHat

2017/09/19 at 19:31
Title says, reset image to div size, and you used selector img {} that will affect images in and out of the div, that is within what has been asking works but presents a side effect that will make other images that should not fit the size of their "parents" elements, the probable suitable selector would be #conteudo img or #conteudo > img

– Guilherme Nascimento

2017/09/19 at 19:33
@Magichat is not talking about the author’s code, but the selector you used. Any "direct" selector will affect all elements on the page. This is the basics of CSS1, 2 and 3. I’m not talking about specific code, I’m stating the cause of side effects on any site, regardless of the code. Details: https://www.w3.org/TR/CSS1/ and https://www.w3.org/TR/CSS2/

– Guilherme Nascimento

2017/09/19 at 20:10
@Magichat guy every time is the same thing, I don’t even know how I still struggle to explain something to you, of course it causes side effect, the selector without setting a "father/Parent" img {} will affect all images of any site, is side effect and ready... side effect is that problem that may or may not occur. The title of the question is clear, "How to readjust the image to the size of the div", your answer presents something that will affect images in and out of the div, so you will have images that will fit to other elements, unless the AP page had only "an image"...

– Guilherme Nascimento

2017/09/19 at 20:19
...which is rare. I’ll simply give up trying to present you with a good path based on experience and let you launch random responses that may or may not cause problems to Phds, if you cannot accept the voice of experience wanting to help you and you believe that everything is 100% relative based on parallel universes where in another universe img {} and then it’ll have to work on everyone I just give up. It’s not the first time I try to give you some experience about html, css and php and you always think it’s meaningless and argue, I just give you one last piece of advice:

– Guilherme Nascimento

2017/09/19 at 20:22
I study the basics and then the advanced of things and do tests in different environments (if it is web apply the css in different pages) and only then you will be sure of things. If you want to learn by the way already trodden, great, otherwise I wash my hands. Until another time.;

– Guilherme Nascimento

2017/09/19 at 20:23
In the example there is only 1 image, and using this direct selector, it is the same as saying : "All images will have 100% of the height and width of the div", it is simple not to complicate , viu... If by chance he has other images he can adjust the size by div, you know.. I know how css behavior works after all is the basics, you should have noticed, that the basics I understand. I appreciate your attention and pass other views... But it’s all assumption...@Guilhermenascimento

– MagicHat

2017/09/19 at 20:24
Mô carnival in a correct answer, then clean up this mess there in the comments pls...@Guilhermenascimento

– MagicHat

2017/09/19 at 20:26
What point of view, that’s not point of view, that’s explanation of behavior, point of view is how I see it, that’s not how I see it, that’s how it works. Look I give up, everything you think is a relative thing and fixed at the same time, I don’t know if it’s your way of thinking or anything like that, but it’s not the first time I’ve told you, there’s nothing relativity in basic behavior, I’ve talked about php html and css with you and you’re always debating and confusing the understanding...

– Guilherme Nascimento

2017/09/19 at 20:28
... I think I better give up explaining, face nothing against you, if I want help I won’t deny it, but I just won’t point out to you where the holes are, I’m starting to think or that you think everything is so relative that a simple img can create a giant thing or else you think I live by "achism" (I think this, I think that, etc.), I’m going to delete the conversation. If you want help and learn Blz, but I just don’t mess around anymore.

– Guilherme Nascimento

2017/09/19 at 20:30
@Guilhermenascimento Vei, what was in your coffee today? Are you flying?? If you’re asking a question even the AP raised... It looks better in the chat for these things that can be one way or another.... Go have a drink of water, very slowly.... is give a +1 ai for my patience

– MagicHat

2017/09/19 at 20:30
@Magichat may even be that my coffee was strong, but surely you are not reading with any attention... look I give up this conversation is not leading to anything if it is not read what was written. Until another time.

– Guilherme Nascimento

2017/09/19 at 20:31
@Guilhermenascimento blz... good rest... It’s always good to talk to you, you know.

– MagicHat

2017/09/19 at 20:33

Show 11 more comments