我怎样才能使3容器与图像自动调整大小？

我想达到类似的效果在这个页面上：http://ketrawars.com 我怎样才能使3容器与图像自动调整大小？

当您尝试调整浏览器窗口，所有的图像与它一起调整。如果我的div包含一个图像，我可以得到这个工作，我设置宽度100％。但是，当我需要将3张图像放在另一张图像旁时，我遇到了问题。

我的代码：

<div class="content"> 
    <img src="images/main_01.png" alt="" /> 
</div> 

<div class="content"> 
    <img src="images/main_02.png" alt="" /> 
    <img src="images/main_03.png" alt="" /> 
    <img src="images/main_04.png" alt="" /> 
</div>

CSS：

.content { 

    /* Set rules to fill background */ 
    min-height: 100%; 
    min-width: 1024px; 

    /* Set up proportionate scaling */ 
    width: 100%; 
    height: auto; 

    /* Set up positioning */ 
    position: relative; 
    top: 0; 
    left: 0; 
}

这是它做什么：

而这就是需要：

随着选项t o在中间图像上写下文字（第二张）。

来源

2016-07-20 Ondrej Tokar

有没有原因不把图像作为背景图像放置在CSS中？它们可以使用'background-size'在CSS中缩放。这将使图像居中更容易。此外，它将使文字更容易放置在图像上。 – Toby

如果有三个相等大小的图像，则他们的每一个的宽度都设置为32％：

.content img { 
    width:32%; 
}

img元件被显示为inline，默认情况下。 这意味着浏览器将在它们之间添加内联空间，导致换行符 - 您必须减去一个或两个百分比来补偿这个空间。

我建议将图像显示为块，然后将它们浮动以删除内联空间。

.content img { 
    display:block; 
    margin:0; 
    padding:0; 
    float:left; 
    width:33%; 
}

如果你的图片是同样的大小，只需设置自己的比例，以使所有元素的宽度为100。

另一种好方法，以确保事情会与屏幕调整使用视口单元：vw和vh。它们分别定义为视口的宽度和高度的1/100。但是，只有基于Gecko的浏览器才会动态更新它们。

Codepen

来源

2016-07-20 22:11:28 Polyov

谢谢，但是这些图像的宽度不是相同的:(但是我会尝试在该区域做一些实验。谢谢。 –

@OndrejTokar对不起，我忘记暗示：只要所有三个元素的宽度百分比增加到100，它们可以是不同的宽度，这适用于容器中的任何'n'元素。 – Polyov

我怎样才能使3容器与图像自动调整大小？

回答

相关问题