My Objective
https://i.sstatic.net/KgK0F.png
I aim to align images of different sizes and shapes within the same frame using only CSS.
The image size should adjust proportionally as the browser window is resized.
Current Progress
JSFiddle
Currently, only horizontal images are displaying correctly.
Smaller images become bigger while larger ones shrink to fit inside the frame.
The demonstration in the Fiddle shows that square and vertical images are not behaving as intended.
I am seeking a solution that will work for all shapes of images.
Code Sample
The code structure mirrors that of JSFiddle.
For a better view, it is recommended to refer to the JSFiddle link provided above.
/* 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 {
display: 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>