CODEWITHSUNDEEP
htmlimagecss
itti
itti

Reputation: 51

How to make all images fit/same size inside div & responsive

Image:(https://i.sstatic.net/VAGy0.jpg)1
All my images has a different size (width/height)
I want to make all my images fit & Responsive inside div even the size of width:100%+ i can use overflow:hiddento hide some parts, but I want to keep it all same height to make it equal and still responsive! like height is auto (height:auto)
I want to use this code <div><img src=".."/></div>
I don't want to use/change code to style background: url('..'); or any flex or any object-fit:...; or use any javascript
Image:(https://i.sstatic.net/Ltuef.jpg)2
Image:(https://i.sstatic.net/7VFFP.jpg)3

body,
html {
  background: #9b9;
}

img {
  max-width: 100%;
  height: auto;
  width: auto;
  max-height: auto;
  position: relative;
  vertical-align: middle;
  left: 50%;
  transform: translate(-50%);
}

div {
  width: 20%;
  height: auto;
  min-height: 100%;
  overflow: hidden;
  position: relative;
  display: inline-block;
}
<div>
  <img src="https://placekitten.com/g/400/500"> Text(1)
</div>



<div>
  <img src="https://justifiedgrid.com/wp-content/gallery/life/biking/137646854.jpg"> Text(2)
</div>


<div>
  <img src="http://centraltibetanreliefcommittee.org/doh/photo-gallery/good-sliders/MenuCool5/images/image-slider-1.jpg"> Text(3)
</div>


<div>
 <img src="https://www.aussiespecialist.com/content/asp/en/sales-resources/image-and-video-galleries/_jcr_content/mainParsys/hero/image.adapt.1663.medium.jpg"> Text(4)
</div>

Upvotes: 1

Views: 3325

Answers (1)

doğukan
doğukan

Reputation: 27389

body,
html {
  background: #9b9;
}

img {
  max-width: 100%;
  max-height: auto;
  position: relative;
  vertical-align: middle;
  left: 50%;
  transform: translate(-50%);
  height: 150px;
  width: 150px;
  object-fit:cover;
}

div {
  width: 20%;
  height: auto;
  min-height: 100%;
  overflow: hidden;
  position: relative;
  display: inline-block;
}
<div>
  <img src="https://placekitten.com/g/400/500"> Text(1)
</div>



<div>
  <img src="https://justifiedgrid.com/wp-content/gallery/life/biking/137646854.jpg"> Text(2)
</div>


<div>
  <img src="http://centraltibetanreliefcommittee.org/doh/photo-gallery/good-sliders/MenuCool5/images/image-slider-1.jpg"> Text(3)
</div>


<div>
 <img src="https://www.aussiespecialist.com/content/asp/en/sales-resources/image-and-video-galleries/_jcr_content/mainParsys/hero/image.adapt.1663.medium.jpg"> Text(4)
</div>

Upvotes: 0

Related Questions