Question

我的问题如下。当我调整浏览器窗口的大小时，中间的图像会下降到其他2个以下。

工作时的形象：Working website image
缩小浏览器时的图片：Broken Website Image
小型显示器也是如此，我的代码如下：

CSS:

.content {
padding-top:50px;
text-align: center;
}
.samp{
float: left;
width: 188px;
height: 356px;
margin-top: 50px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 320px;
}
.multiv{
float: left;
width: 247px;
height: 431px;
margin-top: 100px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 60px;
}
.minecraft{
float: right;
width: 234px;
height: 327px;
margin-top: 73px;
margin-right: 280px;
margin-bottom: 5px;
margin-left: 0px;
}

有3张图片我只想让它们留在中间区域的一个地方，然后用浏览器调整大小。

Answer 1

用这个改变你的代码，兄弟......

 .content {
    padding-top:50px;
    text-align: center;
    white-space: nowrap;
}

.samp, .minecraft, .multiv{
    vertical-align: top;
    display: inline-block;
}

.samp{
width: 247px;
margin-top: 50px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 320px;
}
.multiv{
width: 247px;
height: 431px;
margin-top: 100px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 60px;
}
.minecraft{
width: 234px;
height: 327px;
margin-top: 73px;
margin-right: 280px;
margin-bottom: 5px;
margin-left: 0px;
}

它会给你一个没有移动的固体包装，你可以从那里调整它：F

Answer 2

不要使用float，只需使用width:33.3%和height:auto

示例：

http://fiddle.jshell.net/Ft3p4/

Answer 3

您可以按照relative和absolute定位以及基于百分比宽度的块进行操作。

结果：http://jsfiddle.net/3mAh3/2/

我给了它一个包装器（.collection类）并使用该类设置了所有div样式，可以将它调整为几乎任何东西，并且由于z-index它也会很好地重叠

HTML

<div class="content">
<div class="collection">
  <div class="samp">
    <a href="index.html"><img src="http://therealmgaming.com/images/samp.png" /></a>
  </div>
  <div class="multiv">
    <a href="index.html"><img src="http://therealmgaming.com/images/multiv.png" /></a>
  </div>
  <div class="minecraft">
    <a href="index.html"><img src="http://therealmgaming.com/images/minecraft.png" /></a>
  </div>
</div>
</div>

CSS：

 .content {
    padding-top: 50px;
    text-align: center;
 }
 .collection {
    position: relative;
    width: 100%;
 }
 .collection div {
    position: absolute;
    width: 33%;
 }
 .multiv {
    top: 50px;
    left: 33%;
    z-index: 2;
 }
 .samp {
    left: 0;
    z-index: 1;
 }
 .minecraft {
    top: 30px;
    right: 0;
    z-index: 1;
 }

您可以安全地删除.collection并将样式添加到.content，具体取决于.content中的其他内容，但请不要忘记将.collection div更改为{{ 1}}。

示例：http://jsfiddle.net/3mAh3/4/

或更好：http://jsfiddle.net/3mAh3/5/

如何使图像按比例缩放到Web浏览器窗口的大小？

3 个答案: