带有 img 标签的全屏图像

Posted 2023-03-05

【中文标题】带有 img 标签的全屏图像

【英文标题】：Image in full screen with img tag

【发布时间】：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

【参考方案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-height 和 min-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 属性的大图像问题。