CODEWITHSUNDEEP
css
JsStorm2
JsStorm2

Reputation: 75

pictures doesn't to be the same size (css)

I want my img to always be the same size, but to make it look good too. (object-fit?). I want these pictures to be the same size.

Actually my img has width: 100%;, and doesn't have height property css.

Please, check my code in jsfiddle. (comment)

Upvotes: 0

Views: 118

Answers (3)

aesthatiks
aesthatiks

Reputation: 50

https://jsfiddle.net/z09xa8ph/2/

Here is your edited fiddle, one additional wrapper around the img tag was added and you have to set at least some height value to the box, I added it to the .st--player-box class set it to 31vh, to keep it somewhat responsive. Of course this where you can edit it to fit your needs. 

.st--image-box{
height: calc(100% - 55px);
width: 100%;
float: left;
}

An issue that can come with this approach is that bigger images could be cut off wrong since when using object-fit: cover, the object-position can't be set to center the image, but the cover atribute keeps the image aspect ratio at the parent box size, so images in all boxes will have the same size not depending on their aspect.

Upvotes: 1

dcangulo
dcangulo

Reputation: 2107

It is a solution that does not stretch the image.

* {
  box-sizing: border-box;
}

a {
  color: #d9400b;
  text-decoration: none;
  text-align: center;
}

.st--player-box {
  border: 1px solid #dadada;
  display: block;
  float: left;
  width: 31%;
  margin: 1% 0 1% 1.7%;
}

.st--player-box .st-player-img {
  display: block;
}

.st-player-img {
  /* just adjust the height and width */
  height: 300px;
  width: 100%;
  object-fit: scale-down;
  background: black;
}

.st--player-info {
  height: 55px;
}
<a href="http://strefatenisa2.crehler.com/zawodnicy/rafael-nadal/">
<div class="st--player-box">
<img class="st-player-img" src="https://media.strefatenisa.com.pl/media/image/74/45/ea/rafael-nadal.jpg" title="Rafael Nadal" alt="Rafael Nadal">
<div class="st--player-info">
<span class="st--player-name">Rafael Nadal</span>
</div>
</div>
</a>

<a href="http://strefatenisa2.crehler.com/zawodnicy/roger-federer/">
<div class="st--player-box">
<img class="st-player-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/motorcycle.jpg" title="Roger Federer" alt="Roger Federer">
<div class="st--player-info">
<span class="st--player-name">Roger Federer</span>
</div>
</div>
</a>

Upvotes: 1

Tahseen Quraishi
Tahseen Quraishi

Reputation: 1553

To make your image of same size. keep your image inside a div and give some width and height in that div. Then by adding a css property of width:100% and height:100% your image will always be the same size of the div.

   <style>
       .img-box{
          width:300px;
          height:300px;
        }
       .img-box img{
         width:100%
         height:100%;}
    </style>

    <div class="img-box">
        <img src="image.jpg">
    </div>

Upvotes: 2

Related Questions