CSS：以％w / h在div中以％宽度拟合图像

Question

我有一张图像，希望将其缩放到w + h的50％，但需要它适合宽度设置为25％的div。我不断收到失真的图像，其高度设置为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>

如果图片的投放是动态的，则稍有变化就是图片的投放方式。