my pictures are never the same (shrinking and stretching) in CSS

KamilaB4 0
Viewed 34

I'm coding 3 boxes. There is pic and title at first column, then there is paragraph and at the bottom there is a link. So the boxes are not editable, just the content is. They should look the same no matter how long the title is. But the length of title changes size of pictures.

When the title needed more than one line, the pic shrank. So I added to my code a min-width. Now the ones previosly problematic are OK, but the third are wider than before, than the two other. Now the css code for pic looks like this. It is an icon with border (as you can see):

background-size: 40px 40px;
border: 2px solid $primary-green;
border-radius: 10px;
height: 56px;
margin-bottom: 10px;
min-width: 56px;

What should I add/change to make all 3 pics looks the same?

Structure:

<div class="box box--product">
    <div class="box__content">
        <div class="box__title d-flex">
            <div class="box__icon" style="background-image: url(\''.($atts['icon'] ? wp_get_attachment_image_src($atts['icon'], 'full')[0] : '').'\');"></div>
            <div class="box__icon box__icon--hover" style="background-image: url(\''.($atts['icon_hover'] ? wp_get_attachment_image_src($atts['icon_hover'], 'full')[0] : '').'\');"></div>
            <h3 class="box__hdl">'.$atts['nadpis'].'</h3>
        </div>
        <div class="box__excerpt match-height">
            <p>'.$content.'</p>
        </div>
        <div class="box__more">
            <hr>
            <a href="'.$atts['url'].'" class="link-more">Viac informácií</a>
        </div>
    </div>
</div>

Sass:

    .box {
    $this: &;

    background: $gray-lighter;
    border-bottom: 7px solid $primary-green;
    color: $black;
    cursor: pointer;
    //margin-bottom: $grid-gutter-width;

    &--not-hover {
        cursor: default;
    }


    &__title {
        align-items: center;

        &--subprod {
            margin-bottom: 16px;
            //min-height: 75px;
        }
    }

    &__more {
        text-align: center;
    }

    &__icon {
        background: {
            position: center;
            repeat: no-repeat;
            size: auto 44px;
        }
        border: 1px solid $gray-dark;
        border-radius: 5px;
        height: 80px;
        margin-bottom: 16px;
        margin-right: 10px;
        width: 80px;

        &--big {
            background-size: 65px auto;
            border-width: 2px;
            height: 112px;
            margin-bottom: 40px;
            margin-top: 20px;
            width: 112px;
        }

        &--hover {
            border-color: $white;
            display: none;
        }
    }
&__excerpt {
        font-size: 14px;
        letter-spacing: .44px;
        line-height: 21px;
        margin-top: 10px;
    }
&--product {
        border-bottom-width: 7px;

        #{$this}__hdl {
            color: $primary-green;
            font-size: 16px;
            line-height: 20px;
            margin-left: 10px;
            text-transform: uppercase;

        }

        #{$this}__content {
            padding: 15px 22px 5px;
        }

        #{$this}__icon {
            background-size: 40px 40px;
            border: 2px solid $primary-green;
            border-radius: 10px;
            height: 56px;
            margin-bottom: 10px;
            min-width: 56px;

            &--hover {
                border-color: $white;
            }
        }

        #{$this}__excerpt {
         //   border-bottom: 1px solid $primary-green;
            color: $gray-dark;
            margin-bottom: 15px;
        }

        #{$this}__more {
            .link-warning,
            .link-more {
                letter-spacing: .4px;
                margin-bottom: 10px;
            }
        }

        &:hover,
        &:focus {
            #{$this}__hdl {
                color: $white;
            }

            #{$this}__excerpt {
                border-bottom-color: $white;
            }

            #{$this}__more {
                .link-warning {
                    &::before {
                        background-image: url('../images/icon-warning--white.svg');
                    }
                }
            }
        }
    }
bootstrap-5 css
2 Answers

Something like this ?

.card {
  width: 200px;
  height: 300px; 
  display: inline-block;
  margin: 12px;
  border: 1px solid black;
  overflow: hidden;
  display: flex;
  flex-flow: column;
}

.card .title {
  flex: 0 0 32px;
  width: 100%;
  line-height: 32px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card .link {
  color: blue;
  text-decoration: underline;
  flex: 0 0 32px;
  width: 100%;
  line-height: 32px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card .image {
  flex: 1 1 auto;
  overflow: hidden;
}

.card .image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
<div class="card">
  <div class="title">Some title</div>
  <div class="image">
    <img src="https://picsum.photos/200/300">
  </div>
  <div class="link">Some link</div>
</div>

<div class="card">
  <div class="title">Some title that is way too long to fit in 200px</div>
  <div class="image">
    <img src="https://picsum.photos/1024/768">
  </div>
  <div class="link">Some link that is also way too long for this little box</div>
</div>

MGX0

Well, it is not probably best practise. But I just add max-width: 57px; (+1px)

and it works just fine.

KamilaB40
Related