何時使用CSS中的寬度和高度屬性？

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的寬度和高度屬性有點困惑。

例如，在.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

圖像寬度設爲您需要使用

max-width: 100% 

同爲高度父元素的100％。

Answer 3

這實際上取決於您希望網頁的響應能力如何工作。如果您使用

width:100%; 

那麼當你調整您的瀏覽器屏幕的橫向的一半，你的寬度將是瀏覽器的寬度將減半下來，使您的寬度原來的25％。使用高度不變但高度相同。

要設置寬度父DIV的100％，使用

min-width:100%; 

爲了使它響應基礎上的高度，一定要設置一個高度父DIV。您可以使用vh或vw根據屏幕的高度或寬度設置測量值。例如：

min-height:50vh;