CSS: Подгоните изображение с% w / h в div с% width

Question

У меня есть изображение, которое я хочу масштабировать до 50% w + h, но мне нужно, чтобы оно помещалось в элемент div, ширина которого установлена ​​на 25%.Я продолжаю получать искаженное изображение с высотой 50%, а шириной 25%.

Я использую этот CSS:

.pb_benefits_img_wrapper {
                height: 100%; 
                width:25%;
                float:left; 
                text-align:right; 
                padding-right: 15px; 
                padding-top: 10px;
                border:1px solid red;

            }

            .pb_benefits_img_wrapper > img { 
                width: 50%;
                min-height: 50%;
            }

Любая помощь будет оценена.

Answer 1

Я бы не сказал, что это идеально, но надеюсь, что приведенный ниже код поможет вам.

<style>
    img.image{
        visibility:hidden;
        width:100%;
        height:auto;
    }
    .imageContainer{
        background-image:url("backgroundImage.webp");
        background-size:cover;
        background-position:50%;
        background-repeat:no-repeat;
        width:25%;
        display:inline-block;
    }
</style>

<div class="imageContainer"><img class="image" src="backgroundImage.webp" alt="sample image" /> </div>

Если изображение подается динамически, тогда. Небольшое изменение будет в том, как изображение подается.