如何制作3幅跨网站响应宽度的图像？

问题描述：

所以我想在网站的整个宽度上有3张图片，每张图片都是1/3。我希望他们能够在不同的屏幕尺寸下做出相应的响应和缩放比例，并让他们保持宽高比，我会怎么做呢？如何制作3幅跨网站响应宽度的图像？

到目前为止，我已经管理这个，但是当网站缩小时，它们非常不自然地收缩。

下面是它到目前为止的代码：

#content { 
 
    height: auto; 
 
    width: 100%; 
 
    font-size: 0px; 
 
    display: flex; 
 
} 
 

 
.images { 
 
    width: 33.33%; 
 
    height: 800px; 
 
}

<div id="content"> 
 
    <img src="images/phantom.png" class="images" alt="Image of an actor from the musical Phantom of the Opera"> 
 
    <img src="images/lion_king.png" class="images" alt="Image of an actor from the musical Lion King"> 
 
    <img src="images/wicked.png" class="images" alt="Image of an actor from the musical Wicked"> 
 
</div>

答

你几乎没有，包裹图像的div然后使用calc()设置这些div flex-basis三分之一，你能做到这一点，并设置(max-)width:100%到img小号

编辑 - OP的评论

这工作，但是图像的高度是混乱的，并且所有高度不同，不与页脚齐平。我将如何解决高度太

因为你有不同的比例尺寸的图像，你必须添加display:flex到div

body { 
 
    margin: 0 
 
} 
 

 
#content { 
 
    height: auto; 
 
    width: 100%; 
 
    display: flex; 
 
} 
 

 
#content>div { 
 
    flex: 0 calc(100%/3); 
 
    display: flex; 
 
    /*demo*/ 
 
    box-sizing: border-box; 
 
    border: 2px solid red 
 
} 
 

 
img { 
 
    width: 100%; 
 
    display: block 
 
}

<div id="content"> 
 
    <div> 
 
    <img src="//placehold.it/300x800" class="images" alt="Image of an actor from the musical Phantom of the Opera"> </div> 
 
    <div> 
 
    <img src="//placehold.it/300x800" class="images" alt="Image of an actor from the musical Lion King"> 
 
    </div> 
 
    <div> 
 
    <img src="//placehold.it/300x800" class="images" alt="Image of an actor from the musical Wicked"></div> 
 
</div>

这工作，的但是高度图像混乱了，所有不同的高度，不与页脚齐平。我将如何修补高度呢？ – PinkieBarto

想告诉我一个例子，你有什么和你想要你的当前图像 – dippas

当然，基本上我有图像的原始大小不降低质量，所以高度略有不同。我上传的网站在GitHub的页面来告诉你发生了什么： https://pinkiebarto.github.io/LondonWestEnd/ 我在寻找它被刷新到页脚像这样： HTTP：/ /i.imgur.com/QGuKOAM.png – PinkieBarto

答

把它们放在一个容器元素和图像设置为width: 100%或max-width: 100%。

#content { 
 
    height: auto; 
 
    width: 100%; 
 
    font-size: 0px; 
 
    display: flex; 
 
} 
 

 
.images { 
 
    width: 100%; 
 
}

<div id="content"> 
 
    <div> 
 
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="images" alt="Image of an actor from the musical Phantom of the Opera"> 
 
    </div> 
 
    <div> 
 
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="images" alt="Image of an actor from the musical Lion King"> 
 
    </div> 
 
    <div> 
 
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="images" alt="Image of an actor from the musical Wicked"> 
 
    </div> 
 
</div>

如何制作3幅跨网站响应宽度的图像？

相关推荐