Question

我彼此之间有3张照片（很快将有5张）。当我调整浏览器大小时，图像会变成1px x 1px的微小尺寸。我如何防止这种情况发生？我觉得这应该很简单，但是我不知道该更改什么。

HTML：

<div class="inUseDescription">
    <p style="font-size: 24px;">text text text text text text</p>
<div class="images">
    <img src="image.jpg" width="170" height="150">
</div>
<div class="images">
    <img src="image.jpg" width="170" height="150">
</div>
<div class="images">
    <img src="image.jpg" width="170" height="150">
</div>
</div>

CSS：

.inUseDescription {
    padding: 65px;
    display: inline-block;
    max-width: 62%;
    color: white;
}

.images {
    float: left;
    width: 22%;
    padding: 10px;
}

Answer 1

为.images添加最小宽度

.images {
  float: left;
  width: 22%;
  padding: 10px;
   min-width: 170px;
}

Answer 2

删除内联宽度和高度还会为img标签提供100％的宽度，并仅保持div.images图像容器的宽度

 /*For three images*/
 .images{
    width:33.3%
 }
.images img{
    width:100%;
 }

Answer 3

首先，在每个图像周围放置一个div标签并不明智。

<section class="section-photos">
            <ul class="photos-showcase clearfix">
                <li>
                    <figure class="photo-p">
                        <img src="img/1.jpg" alt="Disaster-Resistant House" width="800px" height="600px">
                    </figure>
                </li>
                <li>
                    <figure class="photo-p">
                        <img src="img/2.jpg" alt="Man facing disasters" width="800px" height="600px">
                    </figure>
                </li>
                <li>
                    <figure class="photo-p">
                        <img src="img/3.jpg" alt="House flooded" width="800px" height="600px">
                    </figure>
                </li>
            </ul>
            <ul class="photos-showcase clearfix">
                <li>
                    <figure class="photo-p">
                        <img src="img/5.jpg" alt="Floods" width="800px" height="600px">
                    </figure>
                </li>
                <li>
                    <figure class="photo-p">
                        <img src="img/6.jpg" alt="Hurricane" width="800px" height="600px">
                    </figure>
                </li>
                <li>
                    <figure class="photo-p">
                        <img src="img/7.jpg" alt="Tsunami approaching city" width="800px" height="600px">
                    </figure>
                </li>
            </ul>
        </section>

这是我在网站上所做的工作，我制作了两行，每行3张照片。

.photos-showcase{ 
    list-style: none;
    width: 100%;
}

.photos-showcase li {
    display: block;
    float: left;
    width: 33.33%;
}
.photo-p {
    width: 100%;
    margin: 0;
    overflow: hidden;
    background-color: #000;
}

.photo-p img {
    opacity: 0.7;
    width: 100%;
    height: auto;
    -webkit-transform: scale(1.15);
    -ms-transform: scale(1.15);
    transform: scale(1.15);
    -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
    transition: transform 0.5s, opacity 0.5s;
}

此代码精美地确保了图像始终看起来不错。支架的宽度为100％，但是使用列表标签控制的图像仅为33.33％，即1/3。这使得所有图像摆放得非常好。需要注意的一件事是，图像最好具有相同的大小，以便控制良好。

当图像悬停在上面时，我上面的代码也创建了深度效果。这是最好的图像库示例。

所以，我的建议是使用ul代替div使用列表，如果要使用行，则使用

我缺少什么来阻止调整大小后的图像粉碎？

3 个答案: