时间戳

首页 > 解决方案 > 在网页中保持相同图像大小的问题

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

问题描述

首先，我想说我对网络编程很陌生。

问题是我正在尝试创建一个待售物业列表。清单应包括图片、标题、描述和价格。

这是页面：

在此处输入图像描述

这是我的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;€&lt;/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;€&lt;/h4>
            </div>

所以两张图片的大小和类型是不同的（ ASD.jpeg 和 T.jpg ）。无论如何都可以创建恒定的图像大小，无论它们的大小不同。

标签： javascripthtmlcss

解决方案

您可以只使用带有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*/
}

这在大多数情况下更容易处理。img当涉及到样式、动画等时，我个人遇到了 HTML 标签的多个问题。

此外，此解决方案将自行处理不同的框尺寸、图像尺寸等。无需为不同的图像分辨率更改任何内容，或手动调整图像大小！

如果您想了解更多信息background-size，请查看此站点。

推荐阅读