【问题标题】:Image in full screen with img tag带有 img 标签的全屏图像
【发布时间】:2014-08-30 06:35:20
【问题描述】:

我正在为我的滑块图像使用img 标签。我需要 图像在其容器内是全宽和全高并居中

我的问题是,当我调整窗口宽度时,我的图像变小并且它的高度不跟随窗口高度。我需要 background-size: cover 相同的行为,但带有图像标签

background: url(../images/slider/002.jpg) center center;
background-size: cover;

如果我将图像设为背景,一切正常,但滑块不会。我需要使用<img> 标签。 这是我的example

【问题讨论】:

  • 尝试使用其他设备的媒体查询设置最小高度
  • 我需要自己使用图片标签。
  • 你想要这样的codepen.io/anon/pen/ECJmH

标签: html css image responsive-design background-image


【解决方案1】:

有几种方法可以使 图像覆盖一个带有图像标签的 div,最简单的方法是像这样使用object-fit property

html,body{
    margin:0;
    height:100%;
}
img{
  display:block;
  width:100%; 
  height:100%;
  object-fit: cover;
}
<img src="http://i.imgur.com/5NK0H1e.jpg" alt="">

浏览器支持非常适合对象匹配(请参阅canIuse),但如果您需要支持更多浏览器(如 IE),您可以使用此技术使用<img> 将图像全屏图像居中标签

  • 垂直和水平居中与绝对定位,负上、下、左、右值结合margin:auto;
  • 图像始终以 100% 覆盖视口 min-heightmin-width

DEMO :

html,body{
    margin:0;
    height:100%;
    overflow:hidden;
}
img{
    min-height:100%;
    min-width:100%;
    height:auto;
    width:auto;
    position:absolute;
    top:-100%; bottom:-100%;
    left:-100%; right:-100%;
    margin:auto;
}
<img src="http://i.imgur.com/5NK0H1e.jpg" alt="">

【讨论】:

  • 有没有办法用 js 或 css 制作图片中心?
  • 是的,您可以为此使用 css 转换和 margin-left:jsfiddle.net/Yq5KR/32
  • @wesleycoder 或者您可以使用绝对定位与负上/下/左/右值结合margin:auto; jsfiddle.net/webtiki/Yq5KR/33
  • 适用于小图像。奇怪的是,大图像并没有被缩小,而是显示得很大。
  • @ldwg 我添加了另一种技术来解决具有object-fit 属性的大图像问题。
最近更新 更多