何时在 CSS 中使用 Width 和 Height 属性？

Question

这是html：

<section class="section-meals">
        <ul class="meals-showcase">
            <li>
                <figure class="meal-photo">
                    <img src="resources/img/1.jpg">
                </figure>
            </li>
            <li>
                <figure class="meal-photo">
                    <img src="resources/img/2.jpg">
                </figure>
            </li>
            <li>
                <figure class="meal-photo">
                    <img src="resources/img/3.jpg">
                </figure>
            </li>
            <li>
                <figure class="meal-photo">
                    <img src="resources/img/4.jpg">
                </figure>
            </li>
        </ul>
</section>    

这是css：

.section-meals {
    padding: 0;   
}

.meals-showcase {      /*This is a ul*/
    list-style: none;
    width: 100%;
}

.meals-showcase li {   /*This is a li element inside of a ul*/
    display: block;
    float: left;
    width: 25%;
}

.meal-photo {       /*This is a figure html element inside of a li*/
    width: 100%;
    height: auto;
    margin: 0;
    overflow: hidden;
    background: #000;
}

.meal-photo img {     /*This is a img element inside of a figure element*/
    opacity: 0.7;
    width: 100%;
    transform: scale(1.15);
    transition: transform 0.5s, opacity 0.5s;
}

.meal-photo img:hover {
    opacity: 1;
    transform: scale(1.03);

}

在上面的 css 代码中，我对何时在 css 中设置 width 和 height 属性感到有些困惑。

例如在.meal-photo 中，我将宽度设置为100% 以确保图形html 元素的宽度与其父元素.meals-showcase li 完全相同。但是对于.meal-photo img，高度属性自动继承自.meal-photo，它是其父级。因为无论我是否设置它，图像的高度都不会改变。

Answer 1

最短的答案是，当您想明确指定这些值时，您可以使用宽度和高度。如果不是，则使用默认值，具体取决于元素。

对于 DIV，默认宽度为 100%。因此，如果您不提及宽度，它会端到端延伸。但高度不是这样的。就像您已经正确注意到的那样，100% 的意思是，直到其父级的宽度。

至于 img 标签，它们采用图像的默认尺寸。所以如果你给一个像width:150px这样的值并离开height:auto，高度会根据宽度的比例缩放。

但还有一些其他元素，例如 span 标签。它的默认宽度是内容的宽度。

在所有情况下，请注意要缩放的元素和父对象的内边距和边距。它们会影响外观。

Answer 2

要将图像宽度设置为您需要使用的父元素的 100%

max-width: 100%

高度相同。

Answer 3

这实际上取决于您希望网页的响应能力如何工作。如果你使用

   width:100%;

然后，当您将浏览器横向调整为屏幕的一半时，您的宽度将是浏览器宽度将减少一半，使您的宽度为原来的 25%。使用 height 的效果相同，但对于高度。

要将宽度设置为父 div 的 100%，请使用

min-width:100%;

要使其根据高度做出响应，请确保为父 div 设置高度。您可以使用 vh 或 vw 根据屏幕的高度或宽度设置测量值。例如：

min-height:50vh;