Centering an image in div tag while it is responsive
Question
I want to display an image on the webpage. The image is long enough having fixed height. So, when someone checks responsiveness by decreasing screen-size it should remove the extra size from that div(which is happening).
I don't know the particular term. So, I will try to explain. it should be shown from the centre point. If image is "abcdefgh". Assume 'a','b'... all are grid number. The default behaviour when screen size will be relatively half is "abcd", but I want to display "cdef".
I gave overflow: hidden to remove extra image out of div. I tried margin-left, margin-right both auto. But, it is only required when the image is less than div size.
img { display: block; margin-left: auto; margin-right: auto; }
<!DOCTYPE html> <html> <body> <div style="border:4px solid black; height:200px;overflow:hidden;text-align:center;"> <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg" alt="Paris" style="width:100%;height:200px;"> </div> </body> </html>
4 answers
solution1
1 ACCPTED 2019-04-01 06:52:19
您可以添加object-fit: cover以“裁剪”图像
solution2
1 2019-04-01 07:00:25
You can set fixed size for image an use object-fit: cover in css.
.wrapper { border: 4px solid black; height: 200px; overflow: hidden; text-align: center; } .img { display: block; margin-left: auto; margin-right: auto; width: 100%; object-fit: cover; }
<div class="wrapper"> <img class="img" src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg" alt="Paris"> </div>
solution3
1 2019-04-01 07:23:53
I used object-fit: cover; , this works.
img { display: block; margin-left: auto; margin-right: auto; object-fit: cover; }
<!DOCTYPE html> <html> <body> <div style="border:4px solid black; height:200px;overflow:hidden;text-align:center;"> <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg" alt="Paris" style="width:100%;height:200px;"> </div> </body> </html>
solution4
1 2019-04-01 07:31:50
Only object-fit: cover will not work. It also needs width and height values. For best practice give height value. Please this value should not in percentage(%). And give image width: 100% and height: 100%. It will work.
.parentDiv { border: 4px solid black; width: 80%; height: 250px; margin: 0 auto; } img { display: block; object-fit: cover; width: 100%; height: 100%; }
<div class="parentDiv"> <img src="https://mdbootstrap.com/img/Photos/Slides/img%20(130).jpg" alt="Paris"><div>
Please check this link: jsfiddle
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.