CODEWITHSUNDEEP
htmlcss
POP
POP

Reputation: 671

How to make the size of the disjointed images the same size in CSS?

What I want to do

like this
Align images of various sizes and shapes in the same frame. (only CSS)
As the browser size changes, the image size also changes in proportion.

Current status

JSFiddle
For now, only the horizontal image works well.
Smaller images get bigger, larger ones get smaller and fit inside the frame.

As you can see in the Fiddle demo, square and vertical don't work well.

How can I do this for all shapes?

Code

It's exactly the same as JSFiddle.
It's recommended that you look at JSFiddle, as the display may be a bit strange. 

/* swiper (doesn't matter) */
var swiperCnt = new Swiper('.swiperCnt', {
  direction: 'vertical',
  autoHeight: true,
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: 'true',
  },
  keyboard: {
    enabled: true,
  },
  mousewheel: {
    forceToAxis: true,
    invert: true,
  },
});
/* The orange "big square" is crushed by the "small vertical" below and is less visible. */
.swiper-slide {
  display: flex;
  align-items: center;
  padding: 1%;
}
.swiper-slide img {
  width: 100%;
}

.swiper-container {
  displey: flex;
  width: 400px;
  height: 300px;
}

p {
  white-space: pre-wrap;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet"/>

<div class="swiper-pagination"></div>
<div class="swiper-container swiperCnt max">
  <div class="swiper-wrapper imgs max-inner">
    <div class="swiper-slide"><img class="work" src="https://placehold.jp/ed3232/ffffff/200x100.png?text=small%20horizontal" alt="smallHorizontal" /></div>
    <div class="swiper-slide"><img class="work" src="https://placehold.jp/392fed/ffffff/500x350.png?text=big%20horizontal" alt="bigHorizontal" /></div>
    <div class="swiper-slide"><img class="work" src="https://placehold.jp/beed2f/424242/100x100.png?text=small%20square" alt="smallSquare" /></div>
    <div class="swiper-slide"><img class="work" src="https://placehold.jp/edab2f/ffffff/800x800.png?text=big%20square" alt="bigSquare" /></div>
    <div class="swiper-slide"><img class="work" src="https://placehold.jp/ed3232/ffffff/100x250.png?text=small%20vertical" alt="smallVertical" /></div>
    <div class="swiper-slide"><img class="work" src="https://placehold.jp/392fed/ffffff/500x600.png?text=big%20vertical" alt="bigVertical" /></div>
  </div>
</div>

<p>
     1) small horizontal       2) big horizontal       3) small square       4) big square       5) small vertical       6) big vertical
</p>


<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>

Upvotes: 0

Views: 61

Answers (1)

REJH
REJH

Reputation: 3275

Set the image width and height of the image and use object-fit: contain;

.swiper-slide {
  box-sizing: border-box; // <-- needed to compensate for padding
  display: flex;
  align-items: center;
  padding: 1%;
  img {
    width: 100%;  // <-- set width
    height: 100%; // <-- set height
    object-fit: contain; // <-- makes sure image fits 100% x 100%x
  }
}

JSfiddle

Also see Object-fit docs on MDN

Upvotes: 2

Related Questions