CSS：如何缩放 <img> 以覆盖整个父 <div>？ [复制]答案

【问题标题】：CSS: How to scale an <img> to cover entire parent <div>? [duplicate]CSS：如何缩放 <img> 以覆盖整个父 <div>？ [复制]
【发布时间】：2015-09-19 12:17:07
【问题描述】：

问题：

http://jsfiddle.net/Log82brL/15/

<img> 不像我对min-width:100% 所期望的那样收缩包装

我正在尝试缩小 <img> 直到高度或宽度与容器匹配

单击<iframe> 中的任意位置以切换容器形状

请尝试编辑<img> CSS：

1) 保持纵横比

2) 覆盖容器分区的整个表面区域

3) 仅编辑图像

这种居中方法看起来有点粗略，但它非常健壮

我的问题是：将<img> 缩放到父<div> 的填充（保持纵横比但覆盖整个表面），即使父<div> 调整大小

也许我可以以某种方式使用 css flex box-layout 之类的？也许是转型？

回答：

http://jsfiddle.net/Log82brL/17/

将 HTML 源设置为透明的 base64 像素（信用 CSS Tricks）

<img id="img" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />

使用 CSS 背景属性

#img {
    width: 100%;
    height: 100%;
    background: url(http://i.imgur.com/0BBsCUB.gif) no-repeat center;
    background-size: cover;
}

【问题讨论】：

你能加一个小提琴或钢笔吗？
你有没有尝试在img标签中添加width和height attr并将其设置为auto或inherit？
它如何保持纵横比并且仍然覆盖整个表面。我不明白。
@neaumusic 检查更新答案。
你想要 background-size: cover 的等价物，但对于 img 元素？如果不是，就像@Riddler，我也不明白你想要实现什么

标签： javascript html image css

【解决方案1】：

如果你不想碰容器，把背景放在<img>上

#img
{ 
  background: url(imgpath) no-repeat center;
  background-size: cover;
}

【讨论】：

哇，怎么没人想到这个。我无法触摸容器 div，因为它是一个共享类，但 img 绝对可以有一个空源
这是一个 hack，违背了 html 的语义。 object-fit: cover; width: 100%; height: 100% 是正确答案。

【解决方案2】：

更新的答案。现在按预期工作。

var toggle = false,
    containerElement = document.querySelector("#container");
window.onclick = function () {
    containerElement.className = (toggle = !toggle ? "skinny" : "");
}
window.alert("click anywhere to toggle shapes. img is a large square");

#container {
    overflow: hidden;
    width: 400px;
    height: 200px;
    transition: all .5s;
    margin: 0 auto; /* this is just for demonstration purposes */
}
#container.skinny {
    width: 200px;
    height:600px;
}
#img {
    height: auto;
    left: 50%;
    margin: auto;
    min-height: 100%;
    position: relative;
    top: 50%;
    transform: translate(-50%, -50%); /* changed to 2d translate */
    width: 100%; /* full width in wide mode */
}

#container.skinny #img {
    width: auto; /* width reset in tall mode */
}

<div id="container">
    <img id="img" src="http://farm8.static.flickr.com/7440/12125795393_3beca9c24d.jpg" />
</div>

【讨论】：

它不起作用，因为图像在宽模式下没有缩小到父宽度
顺便说一句，只要位置不是静态的（相对于它在非静态容器中的位置，从非静态父级的左上角绝对，或者从窗口左上角固定），子应该没关系
@Neaumusic - 我更新了这个答案并删除了绝对定位要求。它现在还可以在宽模式下正确缩小图像宽度。

【解决方案3】：

你可以使用 imgLiquid https://github.com/karacas/imgLiquid

$(function() {
    $(".imgLiquidFill").imgLiquid({
        fill: true,
        horizontalAlign: "center",
        verticalAlign: "top"
    });    
    $(".imgLiquidNoFill").imgLiquid({
        fill: false,
        horizontalAlign: "center",
        verticalAlign: "50%"
    });
});

.boxSep{
    background-color:#f7f7f7;
    border: 2px solid #ccc;
    margin:10px;
    display:inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgithub.com/karacas/imgLiquid/master/js/imgLiquid-min.js"></script>

<div class="boxSep" >
    <div class="imgLiquidFill imgLiquid" style="width:250px; height:250px;">
        <img alt="" src="http://www.juegostoystory.net/files/image/2010_Toy_Story_3_USLC12_Woody.jpg"/>
    </div>
</div>

<div class="boxSep" >
    <div class="imgLiquidNoFill imgLiquid" style="width:250px; height:250px;">
        <img alt="" src="http://www.juegostoystory.net/files/image/2010_Toy_Story_3_USLC12_Woody.jpg"/>
    </div>
</div>

查看实际操作： http://codepen.io/karacas/pen/nlugd

【讨论】：

老实说，我什至不能使用 jquery，更不用说这个库来做这么简单的事情了

【解决方案4】：

这是一个非常简单的 CSS 解决方案，不需要更改 img 标签的属性。

div{
            background-image: url("http://www.frikipedia.es/images/thumb/d/d5/Asdsa-asdas.jpg/300px-Asdsa-asdas.jpg");
            height: auto;
            width: 400px;
            overflow: hidden;
            background-size: cover;
            background-position: center;
        }

【讨论】：

【解决方案5】：

http://krasimirtsonev.com/blog/article/CSS-Challenge-1-expand-and-center-image-fill-div

包含并居中

我认为这是您想要获得的渲染效果，这可能会有所帮助；）

https://jsfiddle.net/erq1otL4/

<div id="container" style="background-image: url(http://farm8.static.flickr.com/7440/12125795393_3beca9c24d.jpg);"></div>   

#container.skinny {
width: 400px;
height:600px;
}
#container {
    width: 400px;
    height: 200px;
    overflow: hidden;
    background-size: cover;
    background-color:pink;
    background-position: center center;
}

var toggle = false,
containerElement = document.querySelector("#container");
window.onclick = function () {
    containerElement.className = (toggle = !toggle ? "skinny" : "");
}
window.alert("click anywhere to toggle shapes. img is a large square");

【讨论】：

【解决方案6】：

不久前，我发现了一个名为 backstretch 的 jQuery 解决方案。现在这看起来用 CSS3 是可能的；从链接页面：

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

【讨论】：

【解决方案7】：

使用单个 css 背景速记属性

.myDiv
{
  height: 400px;/*whatever you want*/
  width: 300px;/*whatever you want*/
  background: url('image-url.png') no-repeat center center;
  background-size: contain;
}

<div class="myDiv">
</div>

【讨论】：

这是一个很好的解决方案，如果 OP 可以对 html 进行细微调整，除非必须支持 IE8（IE8 不支持background-size）

【解决方案8】：

http://jsfiddle.net/Log82brL/7/

#img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

object-fit：cover 允许在填充元素的整个内容框时调整被替换内容的大小以保持其纵横比：其具体对象大小被解析为针对元素使用的宽度和高度的覆盖约束。

【讨论】：

这个方法有很糟糕的browser support，但是有一个polyfill。
支持一点也不差。只有IE不支持。 caniuse.com/#feat=object-fit
尽管我希望不是这样，但 IE 仍然占浏览器使用的很大一部分。不过，这与我给出的答案相同，所以我不能抱怨太多。我主要是想提一下 polyfill。
目标用例是 webkit 浏览器，幸运的是我不必处理 IE，我认为这可能是真正的答案，我只是无法让它与小提琴一起工作
天哪，谢谢！在拔掉头发几个小时后，这救了我。

【解决方案9】：

使用此类 Bootstrap .img-responsive 并且如果父 div 发生更改，则将媒体查询添加到图像和 div 中

【讨论】：

【解决方案10】：

你尝试过引导解决方案

http://getbootstrap.com/css/#images-responsive

差不多

.img-responsive
{
max-width: 100%;
height: auto; 
display: block;
}

添加到您的更新问题

http://jsfiddle.net/arunzo/Log82brL/5/

.skinny>img
{
    max-width:none !important;
    min-height:none !important;    
    max-height:100%;
    -webkit-transform:translate3d(+50%, +50%, 0);
}

我仍然不确定你在寻找什么，对于生涩的动画感到抱歉。

【讨论】：

如果我想让它填满整个表面，宽度永远不能小于 100%。我相信您的解决方案适合容器内的图像
我只想让顶部/底部在父级之外，或者左/右在父级之外，但不能同时拥有，如果父容器增长，它需要拉伸
我明白，这正是我所取得的成就。尝试使用 chrome 检查器工具自行验证。调整结果窗口大小以防万一

【解决方案11】：

试试这个：

<div class="img_container">
   <img src="image/yourimage.jpg" alt="" />
</div>

<style type="text/css">
   .img_container{
      width: 400px;
      height: 400px;
      overflow: hidden;
    }
   .img_container img{
       width: 100%;
       height: auto;
     }
 </style>

设置高度或 with auto 不会使图像看起来被拉伸。

【讨论】：

如果高度小于宽度，这不会填满整个表面
改为将图像的高度与容器匹配。
请看修改后的问题

【解决方案12】：

您可以使用 CSS background 代替 HTML img。

.myDiv
{
  height: 400px;
  width: 300px;
  background-image: url('image-url.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  border: 1px solid #000000;
}

<div class="myDiv">
</div>

这里是JS Fiddle Demo。
尝试更改height 和width - 您会看到图像会拉伸以填充div。

您还可以使用不同的background-size 值：

按比例拉伸包含：background-size: contain;
Too tall div
Too wide div
按比例拉伸填充：background-size: cover;
Too tall div
Too wide div
拉伸以填充 100%：background-size: 100% 100%;
Too tall div
Too wide div

【讨论】：

他想要一个 img 标签而不是背景图片的解决方案。
我得试试这个
你能想出一个使用我附加的jsfiddle的方法
@neaumusic，这是您使用背景图片的 jsfiddle 示例jsfiddle.net/redwood646/df2hLc6v/1
答案是在而不是父容器上使用背景！

【解决方案13】：

通常要实现你需要使用：

parentdiv img {
   width:100%;
   height:auto;}

为了使您的图像与父 div 一起调整大小。

如果您将溢出设置为隐藏，这可能会导致一些裁剪问题（视觉上）。

【讨论】：

这个不行，宽度至少要100%，高度至少要100%
我在问题中放了一个 jsfiddle