Html Question posted in
Some basic documentation can be found here.

Html – Problem with size parent element that has image less than 100% inside

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%;
}
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    I’m a little confused as to what the desired result you want is. If you simply mean that you want the width of the parent to only be as wide as the child elements, you can set the width of the parent element to inline-block.

    This will make the width of the parent expand to be as wide as its child elements, and no more.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search