How to readjust the image to div size

Question

How to readjust the image to div size

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

0

This image has 500px x 500px and the div has 600px x 600px
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>

html css

asked by anonymous 19.09.2017 / 20:30

3 answers

1

#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 place the size and height directly in the image, by css height and width 100%.

19.09.2017 / 21:56

0

You can put to 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%;}<--------------

19.09.2017 / 20:36

Error illegal string offset 'key' cakePhP Put two Arrays inside a foreach [closed]

score 1 · Accepted Answer

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 child direct from #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>

Itmayoccurthattheimageisdistorted,soyoucanchoosetouse100%onlyinheightorwidth,whichwillnotfill,fillordistorttheimage(perhapsitismorerectangularthanthe"parent" element) ) or you should 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>

Fillandmaintainproportion

Toexceedsizeandstillbeabletokeepratio,youcanusemin-widthandmin-heigth,forexample:

#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>

Inthiswayyouwillmaintaintheaspectratiooftheimagerelativetothe"parent" element without distorting.

With background-size

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

background-size: cover

Will adjust until occupying everything

#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 fill the 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>