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

Posted 2023-03-05

技术标签:

【中文标题】CSS：如何缩放 <img> 以覆盖整个父 <div>？ [复制]【英文标题】：CSS: How to scale an <img> to cover entire parent <div>? [duplicate] 【发布时间】：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，我也不明白你想要实现什么 【参考方案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  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  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"  />
</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 divToo wide div

按比例拉伸填充：background-size: cover;Too tall divToo wide div

拉伸以填充 100%：background-size: 100% 100%;Too tall divToo wide div

【讨论】：

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

通常要实现你需要使用：

parentdiv img 
   width:100%;
   height:auto;

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

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

【讨论】：

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

以上是关于CSS：如何缩放 <img> 以覆盖整个父 <div>？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章

像图像一样缩放 iFrame css 宽度 100%

如何使用CSS归档完美像素的像素艺术缩放？

CSS3如何固定图片宽度使图片高度按图片比例自适应？

如何在下一个js中设置背景以覆盖文本？

自动缩放图像以匹配文本高度

使用百分比缩放图像精灵：可能吗？