HTML默認圖像尺寸

-2

我顯示我的代碼3張照片。圖片有不同的大小（寬度和高度）。HTML默認圖像尺寸

<div class="row"> 
     <div class="col-lg-12"> 
      <h2 class="page-header">Gallery</h2> 
     </div> 
     <div class="col-md-4 col-sm-6"> 
      <a > 
       <img class="img-responsive img-portfolio img-hover" src="../../imgVideos/test/1/pictureGallery1.jpg" alt=""> 
      </a> 
     </div> 
     <div class="col-md-4 col-sm-6"> 
      <a > 
       <img class="img-responsive img-portfolio img-hover" src="../../imgVideos/test/1/pictureGallery2.jpg" alt=""> 
      </a> 
     </div> 
     <div class="col-md-4 col-sm-6"> 
      <a > 
       <img class="img-responsive img-portfolio img-hover" src="../../imgVideos/test/1/pictureGallery3.jpg" alt=""> 
      </a> 
     </div> 
    </div>

它加載和顯示的圖片，但圖像的大小是不同的。我怎樣才能設置高度和寬度有一個默認值？

感謝

來源

2017-08-22 user6824563

使用圖像標籤上height和width屬性：

<div class="row"> 
 
    <div class="col-lg-12"> 
 
    <h2 class="page-header">Gallery</h2> 
 
    </div> 
 
    <div class="col-md-4 col-sm-6"> 
 
    <a> 
 
     <img height="100" width="100" class="img-responsive img-portfolio img-hover" src="https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg" alt=""> 
 
    </a> 
 
    </div> 
 
    <div class="col-md-4 col-sm-6"> 
 
    <a> 
 
     <img height="100" width="100" class="img-responsive img-portfolio img-hover" src="https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg" alt=""> 
 
    </a> 
 
    </div> 
 
    <div class="col-md-4 col-sm-6"> 
 
    <a> 
 
     <img height="100" width="100" class="img-responsive img-portfolio img-hover" src="https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg" alt=""> 
 
    </a> 
 
    </div> 
 
</div>

，或通過設置width使用一些CSS和height規則並將其鏈接到圖像要影響：

#myImage { 
 

 
    width: 100px; 
 
    height: 100px; 
 

 
}

<div class="row"> 
 
    <div class="col-lg-12"> 
 
    <h2 class="page-header">Gallery</h2> 
 
    </div> 
 
    <div class="col-md-4 col-sm-6"> 
 
    <a> 
 
     <img id="myImage" class="img-responsive img-portfolio img-hover" src="https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg" alt=""> 
 
    </a> 
 
    </div> 
 
    <div class="col-md-4 col-sm-6"> 
 
    <a> 
 
     <img id="myImage" class="img-responsive img-portfolio img-hover" src="https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg" alt=""> 
 
    </a> 
 
    </div> 
 
    <div class="col-md-4 col-sm-6"> 
 
    <a> 
 
     <img id="myImage" class="img-responsive img-portfolio img-hover" src="https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg" alt=""> 
 
    </a> 
 
    </div> 
 
</div>

另一件事：在上面的代碼，如果你使用的圖像不是正方形，你可能想使用width: auto或height: auto。看下面：

/* sets the width to 100px and the height will be calculate automatically to respect the dimensions */ 
 
#myImage1 { 
 

 
    width: 100px; 
 
    height: auto; 
 

 
} 
 

 

 
/* sets the height to 100px and the width will be calculate automatically to respect the dimensions */ 
 
#myImage2 { 
 

 
    width: auto; 
 
    height: 100px; 
 

 
}

<div class="row"> 
 
    <div class="col-lg-12"> 
 
    <h2 class="page-header">Gallery</h2> 
 
    </div> 
 
    <div class="col-md-4 col-sm-6"> 
 
    <a> 
 
     <img id="myImage1" class="img-responsive img-portfolio img-hover" src="https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg" alt=""> 
 
    </a> 
 
    </div> 
 
    <div class="col-md-4 col-sm-6"> 
 
    <a> 
 
     <img id="myImage2" class="img-responsive img-portfolio img-hover" src="https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg" alt=""> 
 
    </a> 
 
    </div> 
 
</div>

來源

2017-08-22 19:27:36 Ivan

謝謝...我的問題是，我有一個形象，它的尺寸爲寬度= 305和高度= 408。我想在我的使用寬度設置= 「350」和高度=「200」。它保持height =「408」，因爲img-responsive類具有屬性height = auto。所以，如果我刪除類img-reponsive，它的工作原理，但我想知道是否會搞亂手機版？ – user6824563

由於您使用的引導，那麼你已經設置的圖像高度的規則（比如你說的汽車）。你總是可以在你的CSS中覆蓋它們。請務必使用瀏覽器響應預覽工具檢查移動版本。 – Ivan

可以使用CSS max-width屬性。這將限制圖像的寬度。如果將限制設置爲小於或等於最小圖像的真實寬度，它們將全部縮小以匹配該值。請注意，您可能還需要在某些瀏覽器中處理垂直縮放，但在其他瀏覽器中會自動處理。

來源

2017-08-22 19:26:45 TW80000

使用高度和寬度屬性爲：

<img class="img-responsive img-portfolio img-hover" 
src="../../imgVideos/test/1/pictureGallery3.jpg" width="200px" height="200px" 
alt="">

來源

2017-08-22 19:26:48

HTML默認圖像尺寸

回答

相關問題