<img>覆盖分配的空间

我试图横跨页面水平跨越3个图像。我需要这些行为像css background-size: cover;会。两个外部图像表现良好，因为它们的纵横比允许高度填充空白空间。然而，由于其纵横比，熊图不会复制相同的行为。<img>覆盖分配的空间

我需要这张照片来伸展，直到达到盒子的整个高度。如果它超出了盒子的宽度，多余的部分将被overflow: hidden;隐藏起来。如何做到这一点是响应在脑海

这里是我的代码（缩放图像（％）时，调整窗口。）： HTML：

<section> 
    <div class="albumns"> 
     <article> 
      <div class="albumn a1"> 
       <%=image_tag("mount.jpg")%> 
      </div> 
     </article> 
     <article> 
      <div class="albumn a2"> 
       <%=image_tag("bear.jpg")%> 
      </div> 
     </article> 
     <article> 
      <div class="albumn a3"> 
       <%=image_tag("mount.jpg")%> 
      </div> 
     </article> 
    </div> 
</div> 
</section>

CSS：

.albumns { 
position: relative; 
} 
.albumn { 
width: 100%; 
float: none; 
& img { 
    width: 100%; 
} 
}

enter image description here

来源

2013-03-06 derek_duncan

我可能没有太多的帮助，但我总是建议预先编辑你的图像，而不是让浏览器做它，以提高浏览器的性能。如果我有更多的时间在工作Id解释你的答案，但如果没有人帮助，我会回来休息。 – 2013-03-06 22:07:23

我会，但我创建这个来动态接受管理员从我的RoR应用程序的仪表板上传的任何图像。我希望它适应这一点。 – 2013-03-06 22:10:30

由于图像高度可变，因此您需要修正其容器的高度。试试这个：

.albumn{ 
    overflow:hidden; 
    width:33%; 
    height:200px; /*The height you want the images*/ 
} 
.albumn img{ 
    height:100%; 
    width:auto; 
    display:block; 
    margin:0 auto; 
}

来源

2013-03-06 22:12:16

这几乎奏效。但是，宽度现在不包括其分配的空间。有没有办法将图像拉伸到容器外部，然后用“overflow：hidden;”来裁剪多余部分，以便所有空间都被填满？ – 2013-03-06 22:19:30

哦，明白了！我只是在img上切换到'height：auto;''width：100％;'。感谢您的帮助！我将编写一个脚本，根据屏幕大小设置纵横比。 – 2013-03-06 22:22:11

<img>覆盖分配的空间

回答

相关问题