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

Question

我正在嘗試建立一個照片博客，但我無法使照片大小相同。

我嘗試設置寬度和高度，但它不起作用。 我想讓圖像響應。

 body { margin: 0; background-color: #212529; } img { width: 100px; height: 100px; } img { width: 40%; height: auto; margin: 20px; } nav { font-size: larger; font-weight: bolder; font-family: 'Gill Sans'; margin-left: 20px; border-bottom: 2px solid white; width: 50%; padding: 20px; box-sizing: border-box; color: white; }

 <nav>AVOCADO</nav> <img src="https://live.staticflickr.com/4293/36118563896_e15e35df3d_4k.jpg" alt=""> <img src="https://live.staticflickr.com/65535/47767746632_c56a01ea72_k.jpg" alt=""> <img src="https://live.staticflickr.com/65535/52053626044_eaa960e111_k.jpg" alt=""> <img src="https://live.staticflickr.com/65535/52512684817_946eeaa976_k.jpg" alt=""> <img src="https://live.staticflickr.com/65535/49983962043_e047efb5c7_h.jpg" alt=""> <img src="https://live.staticflickr.com/65535/49462720238_f13f6236a8_h.jpg" alt=""> <img src="https://live.staticflickr.com/65535/51054945653_e6605123ed_k.jpg" alt=""> <img src="https://live.staticflickr.com/2653/3963581618_c8513a6304_b.jpg" alt=""> <img src="https://live.staticflickr.com/1537/24596554485_29e9e67f52_b.jpg" alt=""> <img src="https://live.staticflickr.com/1896/44785148891_a4f8e41d9d_k.jpg" alt="">

Answer 1

您將需要使用img { max-width: 100%;}來使圖像響應。

您已經在img上定義了height和width ，這應該使它們都具有相同的大小。 現在只需添加響應的max-width 。

 img { max-width: 100%; } /* for demonstration */ img:not(:first-child) { width: 100px; height: 100px; }

 <img src="https://dummyimage.com/600x400/000/fff"> <img src="https://dummyimage.com/600x400/000/fff">

Answer 2

嘗試以下 CSS：

   img {
     max-width: 100%;
     height: auto;
   }

要么

並在圖像標簽中添加 class="responsive" 並添加以下 css 代碼：

.responsive{
             max-width: 100%;
             height: auto;
           }

參考： W3School-Resposive

Answer 3

將img設置為width: 40vh & max-height: 100px 。 例子：

 body { margin: 0; background-color: #212529; } img { width: 40vh; margin: 20px; max-height: 100px; } nav { font-size: larger; font-weight: bolder; font-family: 'Gill Sans'; margin-left: 20px; border-bottom: 2px solid white; width: 50%; padding: 20px; box-sizing: border-box; color: white; }

 <nav>AVOCADO</nav> <img src="https://live.staticflickr.com/4293/36118563896_e15e35df3d_4k.jpg"> <img src="https://live.staticflickr.com/65535/47767746632_c56a01ea72_k.jpg"> <img src="https://live.staticflickr.com/65535/52053626044_eaa960e111_k.jpg"> <img src="https://live.staticflickr.com/65535/52512684817_946eeaa976_k.jpg"> <img src="https://live.staticflickr.com/65535/49983962043_e047efb5c7_h.jpg"> <img src="https://live.staticflickr.com/65535/49462720238_f13f6236a8_h.jpg"> <img src="https://live.staticflickr.com/65535/51054945653_e6605123ed_k.jpg"> <img src="https://live.staticflickr.com/2653/3963581618_c8513a6304_b.jpg"> <img src="https://live.staticflickr.com/1537/24596554485_29e9e67f52_b.jpg"> <img src="https://live.staticflickr.com/1896/44785148891_a4f8e41d9d_k.jpg">

Answer 4

您可能希望使用object-fit: cover並指定max-width以使它們具有相同的比例。

 body { margin: 0; background-color: #212529; } img { height: auto; margin: 20px; object-fit: cover; max-width: 100px; max-height: 100px; width: 100%; height: 100%; } nav { font-size: larger; font-weight: bolder; font-family: 'Gill Sans'; margin-left: 20px; border-bottom: 2px solid white; width: 50%; padding: 20px; box-sizing: border-box; color: white; }

 <nav>AVOCADO</nav> <img src="https://live.staticflickr.com/4293/36118563896_e15e35df3d_4k.jpg" alt=""> <img src="https://live.staticflickr.com/65535/47767746632_c56a01ea72_k.jpg" alt=""> <img src="https://live.staticflickr.com/65535/52053626044_eaa960e111_k.jpg" alt=""> <img src="https://live.staticflickr.com/65535/52512684817_946eeaa976_k.jpg" alt=""> <img src="https://live.staticflickr.com/65535/49983962043_e047efb5c7_h.jpg" alt=""> <img src="https://live.staticflickr.com/65535/49462720238_f13f6236a8_h.jpg" alt=""> <img src="https://live.staticflickr.com/65535/51054945653_e6605123ed_k.jpg" alt=""> <img src="https://live.staticflickr.com/2653/3963581618_c8513a6304_b.jpg" alt=""> <img src="https://live.staticflickr.com/1537/24596554485_29e9e67f52_b.jpg" alt=""> <img src="https://live.staticflickr.com/1896/44785148891_a4f8e41d9d_k.jpg" alt="">