Question

我有2个div，我想调整这些div中的图像大小但是它们应该总是填充div并限制比例。

如果你试图调整它们的大小，它们将总是填充它们的div并且图像将总是保持它们的比例。

HTML：

<div class="one">
        <img src="imgs/photo1.jpg" class="photo1">  
</div>
<div class="two">
        <img src="imgs/photo2.jpg" class="photo2">  
</div>

CSS：

.one{
  float:left;
  width:50%;
  height:50%; 
  position:relative;
  overflow:hidden;
}

.two{
  position:relative;
  overflow:hidden;
  width:50%;
  height:50%;
  float:left;
}

如何将这些图像设计为这样？

http://www-07.ibm.com/sg/60/

Answer 1

我可能会在这里遗漏一些东西，但如果我理解你的问题，你可以添加：

width: 100%;

到您的img标记，它们将始终填充包含的div。

Answer 2

网站正在使用jquery插件来获得效果，但是你可以通过css3 background-size:cover属性获得相同的效果。

你要做的是：

删除源图像并通过后台提供，然后使用background-size:cover。

<div class="one">

</div>

.one{
float:left;
width:50%;
height:50%; 
position:relative;
overflow:hidden;
background: url("path to image") no-repeat center center;
background-size : cover;
}

Answer 3

试试这个，

.one img, .two img {
  width:100%;
  height:auto;
}

Answer 4

我认为通过不使用标签可以获得最佳效果，而是使用属性制作这些背景图片：

＆＃13;

background-size:cover;
background-position:center;

＆＃13;

调整div内的图像大小

4 个答案: