在网页中保持相同图像大小的问题

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 标签添加宽度和高度。