在網頁中保持相同圖像大小的問題

Question

首先，我想說我對網絡編程非常陌生。

問題是我正在嘗試創建待售物業列表。 清單應包括圖片、標題、描述和價格。

這是頁面：

這是我的 html 代碼：

</div>

            <div class="gallery">
                <a target="_blank" href="T.jpg">
                    <img src="T.jpg" alt="Forest" width="600" height="400">
                </a>
                <h5 class="offer-item-title"><a title="детайли" href="http://www.kalchev.com/estate/offer/6309">Къща, Варна
        обл., с.Болярци</a></h5>
                <div class="offer-item-title">Триетажна къща с красива панорама към Кране Триетажна къща с красива панорама към Кране</div>
                <h4 class="offer-item-price">110 000&nbsp;€</h4>
            </div>

            <div class="gallery">
                <a target="_blank" href="ASD.jpeg">
                    <img src="ASD.jpeg" alt="Northern Lights" width="600" height="400">
                </a>
                <h5 class="offer-item-title"><a title="детайли" href="http://www.kalchev.com/estate/offer/6309">Къща, Варна
        обл., с.Болярци</a></h5>
                <div class="offer-item-title">Триетажна къща с красива панорама към Кране Триетажна къща с красива панорама към Кране</div>
                <h4 class="offer-item-price">110 000&nbsp;€</h4>
            </div>

所以兩張圖片的大小和類型是不同的（ ASD.jpeg 和 T.jpg ）。 無論如何要創建一個恆定的圖像大小，不管它們的大小有什么不同。

Answer 1

您可以只使用帶有background-image屬性集的普通 div。 像這樣的東西：

代替

<img src="T.jpg" alt="Forest" width="600" height="400">

做這個

<div id="myImageOne">

而對於你的 css：

#myImageOne {
    width: 300px;                       /*Width for your image*/
    height: 300px;                      /*Height for your image*/
    background-image: url('T.jpg');     /*Your image url*/
    background-position: center center; /*Center the image in the div*/
    background-size: cover;             /*So that the whole div is filled*/
    background-repeat: no-repeat;       /*Basically useless, due to background-size: cover*/
}

這在大多數情況下更容易處理。 我個人在 HTML img標簽的多個問題中運行過，涉及樣式、動畫等。

此外，此解決方案將自行處理不同的框大小、圖像大小……。 無需為不同的圖像分辨率更改任何內容，也無需手動調整圖像大小！

如果您想了解更多關於background-size ，請查看此站點。

Answer 2

我會從<img>標簽中刪除height和width屬性，並使用 CSS 來設置圖像的高度和寬度。 我根據您提供的代碼為您整理了一個快速示例。

 .gallery { display: inline-block; width: 120px; padding: 5px; border: 1px solid grey; margin: 10px; } .gallery img { width: 120px; height: 80px; }

 <div class="gallery"> <a target="_blank" href="T.jpg"> <img src="https://pmcvariety.files.wordpress.com/2018/07/bradybunchhouse_sc11.jpg?w=1000&h=563&crop=1" alt="Forest"> </a> <h5 class="offer-item-title"><a title="детайли" href="http://www.kalchev.com/estate/offer/6309">Къща, Варна обл., с.Болярци</a></h5> <div class="offer-item-title">Триетажна къща с красива панорама към Кране Триетажна къща с красива панорама към Кране</div> <h4 class="offer-item-price">110 000&nbsp;€</h4> </div> <div class="gallery"> <a target="_blank" href="ASD.jpeg"> <img src="https://i.kinja-img.com/gawker-media/image/upload/s--bIV3xkEm--/c_scale,f_auto,fl_progressive,q_80,w_800/jsprifdd1gmfy7e7nola.jpg" alt="Northern Lights"> </a> <h5 class="offer-item-title"><a title="детайли" href="http://www.kalchev.com/estate/offer/6309">Къща, Варна обл., с.Болярци</a></h5> <div class="offer-item-title">Триетажна къща с красива панорама към Кране Триетажна къща с красива панорама към Кране</div> <h4 class="offer-item-price">110 000&nbsp;€</h4> </div>

需要關注的部分是這個 CSS 規則：

.gallery img {
  width: 120px;
  height: 80px;
}

Answer 3

如果您不需要支持 Internet Explorer，則可以使用object-fit 。

這是一個使用大小截然不同的兩個圖像的示例。 它們被調整大小以適應<img>標簽中指定的height和width ，同時保持比例。

 img { object-fit: cover; }

 <img src="https://via.placeholder.com/350x150" width="350" height="150"> <img src="https://via.placeholder.com/500x500" width="350" height="150">

Answer 4

如果向 img 標簽添加參數，則它比 css 中聲明的樣式具有更高的優先級。 所以避免為 img 標簽添加寬度和高度。