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

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

我会删除 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;
}