如何使圖像大小相同且響應迅速

Question

我編輯了照片，使它們的高度均相同，而畫布的尺寸均相同，但看起來不均勻。 當更改瀏覽器窗口大小時，如何使它們在頁面上看起來都相同，仍然保持響應狀態？

這是我的頁面現在的樣子

這是我的HTML

<div class="row">

<!-- 3 Articles -->

<section>
    <article class="col-4 col-m-4">
        <h4>Cosmetics</h4>
        <div class="img-box">
            <img src="images/powder.png">
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </article>

    <article class="col-4 col-m-4">
        <h4>Bath &amp; Shower</h4>
        <div class="img-box">
            <img src="images/radiumbath.png">
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </article>

    <article class="col-4 col-m-4">
        <h4>Health &amp; Wellness</h4>
        <div class="img-box">
            <img src="images/waterbottle.png">
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </article>
</section>

</div>

這是img CSS和響應式網格：

img {

    width: 100%;
    height: auto;
    vertical-align: middle; 
}

/* RESPONSIVE */

/* MOBILE */
[class*="col-"] {
    width: 100%;
}

/* TABLET */
@media only screen and (min-width: 600px) {
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}

/* DESKTOP */
@media only screen and (min-width: 768px) {
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

Answer 1

您可以為圖像提供max-width

例

您只需要確保最小的圖像大於最大寬度，否則它就不會改變並確保分辨率相同。

如果圖像的分辨率不同（16：9、4：3等），則必須事先裁剪圖像或實施一些js技巧。