CODEWITHSUNDEEP
htmlcss
SourOddity
SourOddity

Reputation: 141

Forcing image to resize to fit div

I'm having some trouble with the CSS for my page which displays social media style posts including images. When displaying the images they are placed inside of a div tag which is styled to try and reduce the size of the images and display the images horziontally next to eachother.

However, I am having the issue that the images still try to stack on top of each other and I can not get them to resize how I would like, especially on mobile. Currently based on some other thread here this is what I've got

.postImg{
    display: inline-block;
    height:100%;
    width:100%;
    object-fit: scale-down;
}

.postImgDiv{
    height: 100px;
}

Example showing issue

Upvotes: 0

Views: 414

Answers (1)

ulou
ulou

Reputation: 5863

Your image taking 100% of the row width. Change it to: width: auto.

Look at this (your case):

.postImg{
    display: inline-block;
    height:100%;
    width:100%;
    object-fit: scale-down;
    border: 1px solid;
}

.postImgDiv{
    height: 100px;
}
<div class="postImgDiv">
  <div class="postImg">A</div>
  <div class="postImg">B</div>
<div>

After fix:

.postImg{
    display: inline-block;
    height:100%;
    width:auto;
    object-fit: scale-down;
    border: 1px solid;
}

.postImgDiv{
    height: 100px;
    text-align: center;
}
<div class="postImgDiv">
  <div class="postImg">A</div>
  <div class="postImg">B</div>
<div>

Upvotes: 2

Related Questions