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>

Possible duplicate of [Align image in center and middle within div](https://stackoverflow.com/questions/4888223/align-image-in-center-and-middle-within-div) — Mukyuu, Apr 01 '19 at 06:47

score 1 · Accepted Answer · answered Apr 01 '19 at 06:52

1

You can add object-fit: cover to 'crop' the image responsively

answered Apr 01 '19 at 06:52

alimbaronia

504
2
10

But, on full screen, it is stretching the image and hiding details. Can I get default image in full screen. As the image I gave is a full size desktop image – Satish Patro Apr 01 '19 at 07:30
1

solved my problem. It was stretching due to heigh of image is more than height of div wrap. But, for me height is constant. So, vertically height fit not required. Thanks – Satish Patro Apr 01 '19 at 07:40

score 1 · Answer 2 · edited Apr 01 '19 at 08:19

1

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>

edited Apr 01 '19 at 08:19

James Coyle

9,922
1
40
48

answered Apr 01 '19 at 07:00

Thuc Nguyen

235
2
8

But, on full screen, it is stretching the image and hiding details. Can I get default image in full screen. As the image I gave is a full size desktop image – Satish Patro Apr 01 '19 at 07:30
solved my problem. It was stretching due to heigh of image is more than height of div wrap. But, for me height is constant. So, vertically height fit not required. Thanks – Satish Patro Apr 01 '19 at 07:40

score 1 · Answer 3 · answered Apr 01 '19 at 07:23

1

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>

answered Apr 01 '19 at 07:23

Abdullah Ajmal

367
3
14

But, on full screen, it is stretching the image and hiding details. Can I get default image in full screen. As the image I gave is a full size desktop image – Satish Patro Apr 01 '19 at 07:30
solved my problem. It was stretching due to heigh of image is more than height of div wrap. But, for me height is constant. So, vertically height fit not required. Thanks – Satish Patro Apr 01 '19 at 07:40

score 1 · Answer 4 · edited Apr 01 '19 at 07:45

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

Centering an image in div tag while it is responsive

4 Answers4