This is my default look with all images set to 100% width:
enter image description here
This images must have different height and width because of have to keep ratio. Because of that I can not use size with px, vw, etc. – only precents.
If I set images width to 60% i looks like that:
enter image description here
Images have 60% width but parent element has size like with 100% width image inside.
How make that parent element will has width like image?
<div class="casing">
<div class="casing__item">
<div class="item__icon"><img src="PK.png"></div>
<div class="item__label"><span>PK</span></div>
</div>
<div class="casing__item">
<div class="item__icon"><img src="PK-PW2.png"></div>
<div class="item__label"><span>PK+PW2</span></div>
</div>
<div class="casing__item">
<div class="item__icon"><img src="PK2W-PW2.png"></div>
<div class="item__label"><span>PK2W+PW2</span></div>
</div>
</div>
I tried with:
.casing__item {
display: flex;
flex-wrap: wrap;
gap: 0;
}
.casing__item > div {
width: auto;
}
.casing__item img {
width: 60%;
}
.casing__item {
display: table;
}
.casing__item > div {
display: table-cell;
vertical-align: middle;
}
.casing__item img {
width: 60%;
}
New contributor
siepaw is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
2
From what I can understand from your post, you want to be able to make a row of images smaller or larger while retaining their natural aspect ratio and remaining matched in height? Then just specify the height and let the width remain as auto.
If I have misunderstood your post, please edit it to make your requirements clearer.
.casing {
padding: 1em;
background: #eee;
border-radius: 0.5em;
margin-bottom: 2em;
display: flex;
gap: 1em;
}
.c2 img {
height: 100px;
}
.c3 img {
height: 50px;
}
.c4 img {
height: 25vw;
}<p>image height not specified ... images are displayed at their intrinsic size</p>
<div class="casing c1">
<div class="casing__item">
<div class="item__icon"><img src="https://picsum.photos/100/200"></div>
<div class="item__label"><span>PK</span></div>
</div>
<div class="casing__item">
<div class="item__icon"><img src="https://picsum.photos/150/150"></div>
<div class="item__label"><span>PK+PW2</span></div>
</div>
<div class="casing__item">
<div class="item__icon"><img src="https://picsum.photos/200/100"></div>
<div class="item__label"><span>PK2W+PW2</span></div>
</div>
</div>
<p>image height specified as 100px</p>
<div class="casing c2">
<div class="casing__item">
<div class="item__icon"><img src="https://picsum.photos/100/200"></div>
<div class="item__label"><span>PK</span></div>
</div>
<div class="casing__item">
<div class="item__icon"><img src="https://picsum.photos/150/150"></div>
<div class="item__label"><span>PK+PW2</span></div>
</div>
<div class="casing__item">
<div class="item__icon"><img src="https://picsum.photos/200/100"></div>
<div class="item__label"><span>PK2W+PW2</span></div>
</div>
</div>
<p>image height specified as 50px</p>
<div class="casing c3">
<div class="casing__item">
<div class="item__icon"><img src="https://picsum.photos/100/200"></div>
<div class="item__label"><span>PK</span></div>
</div>
<div class="casing__item">
<div class="item__icon"><img src="https://picsum.photos/150/150"></div>
<div class="item__label"><span>PK+PW2</span></div>
</div>
<div class="casing__item">
<div class="item__icon"><img src="https://picsum.photos/200/100"></div>
<div class="item__label"><span>PK2W+PW2</span></div>
</div>
</div>
<p>image height specified as a proportion of viewport width for a responsive result</p>
<div class="casing c4">
<div class="casing__item">
<div class="item__icon"><img src="https://picsum.photos/100/200"></div>
<div class="item__label"><span>PK</span></div>
</div>
<div class="casing__item">
<div class="item__icon"><img src="https://picsum.photos/150/150"></div>
<div class="item__label"><span>PK+PW2</span></div>
</div>
<div class="casing__item">
<div class="item__icon"><img src="https://picsum.photos/200/100"></div>
<div class="item__label"><span>PK2W+PW2</span></div>
</div>
</div>