html - 在 div 中调整图像大小

Question

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

就像这个: http://www-07.ibm.com/sg/60/

如果您尝试调整它们的大小，它们将始终填充其 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

网站使用 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;
}