Question

我正在尝试创建一个居中的div，其中包含两个并排的图像，并且当浏览器按比例缩小时，右侧的一个跳转到第一个图像下方。并且所有这些都集中在一起。

我尝试使用div这样做，但我陷入困境，无法弄清楚我正在做的事情是否正确。现在图像不会缩小。

这是我的代码的小提琴： http://jsfiddle.net/v5dejopw/1/

.wrapperlookbook {  
overflow:hidden;
width: 1200px;
margin:0 auto;
padding-top: 60px;
}

#onelookbook {  
float:left; 
width:585px;
}
#twolookbook { 
background-color: #fff;
overflow:hidden;
min-height:600px; 
width:585px;
}

@media screen and (max-width: 600px) {
#onelookbook { 
 float: none;
margin-right:0;  
  }
}

img {
max-width:100%
}

有人能指出我正确的方向吗？

谢谢！

Answer 1

我的消息是在你的代码中添加：如果想要在一行：

.wrapperlookbook { 
    max-width: 1200px;
    width: 100%;
}

#onelookbook {
    width: 50%;
}

#twolookbook {
    width: 50%;
}

如果想要两行：

@media screen and (max-width: 600px) {
  #onelookbook { 
     width: 100%;
  }
  #twolookbook { 
     width: 100%;
  }
}

祝你好运！ ;）

Answer 2

问题在于元素的宽度。在这里查看：

.wrapperlookbook {  
  overflow:hidden;
  width: 400px;
  margin:0px;
    margin: auto;
  padding-top: 60px;
    border: 1px solid green;
}

#onelookbook {  
  float:left; 
  width:200px;
}
#twolookbook { 
  background-color: #fff;
  overflow:hidden;
  min-height:600px; 
  width:200px;
}

@media screen and (max-width: 600px) {
   #onelookbook { 
    float: none;
    margin-right:0;  
  }
}
  
img {
    max-width:100%
}

<div class="wrapperlookbook">
    <div id="onelookbook">
      <a href="#">
          <img src="http://placehold.it/585x600" width="585" style="max-width:100%;height:auto;"></a></div>
    <div id="twolookbook">
      <a href="#">
          <img src="http://placehold.it/585x600/c0c0c0" width="585" style="max-width:100%;height:auto;"></a></div>
  </div>

Ps：我减小了这里的宽度

Answer 3

我认为使用bootstrap是一个很好的选择，因为bootstrap负责调整每个元素的大小。

首先，从http://getbootstrap.com/getting-started/#download

下载最新版本的bootstrap

接下来，引用头部的文件

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<script src="js/bootstrap.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-theme.min.css" rel="stylesheet" />

然后，在你的身体中添加几个div

<body> 
  <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="height: 200px">
      <img alt="Map of Forecast Area" src="http://www.srh.noaa.gov/wwamap/png/hgx.png" style="width: 100%; height: 100%" />
  </div>
  <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" style="height: 200px">
      <img alt="Map of Forecast Area" src="http://www.srh.noaa.gov/wwamap/png/hgx.png" style="width: 100%; height: 100%" />
  </div>

这意味着什么？ Bootstrap以12列模式运行。在这种情况下，我制作了两个宽度为6（50％）的分辨率xs（超小），sm（小），md（中）和lg（大）。 Bootstrap将根据设备分辨率调整div的大小，如果您调整浏览器大小，页面将相应调整大小。

这只是一个基本的例子，但可以帮助你作为使用bootstrap的起点。

根据浏览器大小在div中缩放图像

3 个答案: