2
Good morning!
I wonder how I can do with CSS
so that an image is centered in a way that is responsive in all monitors.
2
Good morning!
I wonder how I can do with CSS
so that an image is centered in a way that is responsive in all monitors.
2
https://jsfiddle.net/4zhh7LnL/ Look at this fiddle, what I did was this
I added margin: 0 auto
and text-align:center
, with this, will already center any div on any monitor, the rest was only demonstrative
does not make the image responsive
@Murilogambôa If you set the image with width: 100%
, it will cover the size of the div
, I mean, whatever size you change, you have to change in div
and not in the picture
But that doesn’t make it responsive
this can flatten the image, or even cause the image to burst the size of the parent div, causing it to cover elements below the parent element
2
Well, to be responsive, besides the margin: 0 auto;
, need to leave the image with display: block;
and, more importantly, max-width: 100%;
. Thus, images larger than the screen are resized.
https://jsfiddle.net/dudaskank/wy17vd5h/
div#responsive-imgs {
}
div#responsive-imgs img {
display: block;
margin: 5px auto;
max-width: 100%;
}
<div id="responsive-imgs">
<img src="https://lh3.googleusercontent.com/-jr0_VjsnLbk/TXgyw-U3RAI/AAAAAAAAAOM/xr23lB2vJ9o/s1600/pequena-sereia1a.gif" />
<img src="http://www.icmbio.gov.br/portal/images/stories/imgs-unidades-coservacao/queimada_grande.jpg" />
</div>
this does not make the image responsive
2
Well, first, to leave a responsive image, you’ll need the following pattern for the element img
:
For displaying wider than higher images
img{
min-width:100%;
max-height:100%;
}
For displaying images higher than wide
img{
min-height:100%;
max-width:100%;
}
After setting this pattern, set the following patterns for the parent element:
div{
position:relative;
overflow:hidden; /*Utilizar para não exibir o corte automático da imagem*/
/*Deve-se definir um min-height e min-width para que a imagem apareça corretamente no local desejado, e com o tamanho desejado, por exemplo:*/
width: 50%;
min-height: 200px;
}
The CSS above will define the size of the image display box. After that, the image should receive the following properties:
img{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
This will cause the image to start in the center of the parent div, however, Transform will cause the center of the image to be aligned to the center of the parent div.
As described above, below follows the functional example in a Fiddle
*{
margin:0;
padding:0;
box-sizing:border-box;
}
figure{
position:relative;
min-height:180px;
width:160px;
overflow:hidden;
}
figure img{
min-width:100%;
max-height:100%;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
<figure>
<img src="data:image/jpeg;base64,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">
</figure>
Any questions, I’m here to help
0
In case you can use @media screen... and give None float (if you have placed left or right float in img) and apply a margin 5px auto. ex:
.logo-2{
float: right;
width: 150px;
height: 60px;
background-image: url('../imagens/logo2.png');
background-size: 100% 100%;
background-position: center;
background-repeat: no-repeat;
/*background-color: orange;*/
}
@media screen and (max-width: 510px){
.logo-2{
float: none;
margin: 5px auto;
}
}
Browser other questions tagged html css
You are not signed in. Login or sign up in order to post.
You could share what you’ve already tried including your HTML and CSS to ask?
– Caique Romero