如何使图像大小相同并具有响应性答案

【问题标题】：How to make images same size and responsive如何使图像大小相同并具有响应性
【发布时间】：2018-10-02 17:41:10
【问题描述】：

我编辑了我的照片，使它们的高度相同，画布尺寸也相同，但它们看起来不均匀。如何使它们在页面上看起来都一样大小，并且在我更改浏览器窗口大小时仍然响应？

这是我的 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%;}
}

【问题讨论】：

这是因为图片的高度相同，但宽度不同。
@Ashonko 如果我这样做：img{ width:auto; height:100%;} 那么它们的大小相同，但是当我缩小浏览器窗口时它们不会缩放。
试试max-height: 100%;。

标签： html css image responsive

【解决方案1】：

你可以给图片一个max-width

Example

您只需要确保最小图像大于最大宽度，否则它不会改变并确保分辨率相同。

如果图像的分辨率不同（16:9、4:3 等），您必须事先裁剪图像或实施一些 js 恶作剧。

【讨论】：