Question

首先，我想说我是Web编程的新手。

问题是我正在尝试创建待售物业列表。该列表应包含图片，标题，描述和价格。

这是页面：

这是我的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的更多信息，请选中this site out。

Answer 2

我将从您的height标记中删除width和<img>属性，并使用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。

这里是一个使用两个尺寸截然不同的图像的示例。调整它们的大小以适合您height标签中指定的width和<img>，同时保持比例。

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

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

4 个答案:

代替

这样做