0

基本上有两个图像应该位于页面的中心，当页面变小时，这些图像需要垂直堆叠。目前我可以让它们垂直缩放，但我不知道如何使它们居中。如果我使用边距或填充，当页面缩小并且看起来不太好时，它们会保持在原来的位置。我需要它们在页面缩小时向边缘移动，然后在页面宽度太小时时堆叠。我这样做是为了让它们在移动设备和较小的分辨率上正确显示。有谁知道做到这一点的最佳方法？

这是html：

<body>
<div class="wrapper">
<div class="wordmark">
<a href="#">
<img src="........." />
</a>
</div>
</div>


<div class="logowrap">
<div class="row">
<ul class="thumbnails">


<div class="logo1">
<li class="span6 home-left">
<a href="#">
<img src="SDI-logo.png" alt="SDI-logo"  />
</a>
</li>
</div>

<div class="logo2">
<li class="span6 home-right">
<a href="#">
<img src="Debate-Logo.png" alt="SDI-logo"  />
</a>
</li>
</div>

</ul>


</div>
</div>
</body>

这是CSS：

.navbar {
    background-color:#000;
}

.container{


    background-color:transparent;


}

.wrapper {
    background-color:#000;
}

.wordmark{
    max-width:100%;
    max-height:100%;
    padding-left:15px;
}

.logo1{
    float:left;




.logo2 {
    float:inherit;


}

.logowrap{


}
4

2 回答 2

2

我已经稍微改变了你的代码。看看这里，看看是否对你有帮助（http://jsbin.com/UdODawI/1/）

   .thumbnails {
        width: 100%;
        margin: 0 auto;
        list-style-type: none;
    }

    .wrapper {
        background-color:#000;
    }

    .logowrap {
        margin: 0 auto;
        text-align: center;
    }

    .logo1{
      display: inline-block;
    }

    .logo2 {
      display: inline-block;

    }
于 2013-10-08T15:52:08.267 回答
0

尝试将此 CSS 添加到您的图像中

.thumbnails img {
   max-width:100%;
   height: auto;
}

这允许您的图像根据其父级调整大小

于 2013-10-08T15:39:28.333 回答