blocks|key|513362|text|对于IE，您还需要包括第二行-宽度:+100%25；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|513363|.mydiv+img+{
++++max-width:+100%25;
++++width:+100%25;
}|code-block|syntax|javascript|513364|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>For IE you also need to include the second line - width: 100%; </p>

<pre><code>.mydiv img {
    max-width: 100%;
    width: 100%;
}
</code></pre>


blocks|key|513383|text|background:url('/image/url/')+right+top+scroll;+
background-size:+auto+100%25;+
min-height:100%25;|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|513384|遇到了相同的最高值。上面的方法对我很有效。|unstyled|513385|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>background:url('/image/url/') right top scroll; 
background-size: auto 100%; 
min-height:100%;
</code></pre>

<p>encountered same exact symptops. above worked for me.</p>


blocks|key|513439|text|我不被允许‘添加评论’，所以这样做，但Eru+Penkman所做的是相当准确的，让它像背景覆盖所有你需要做的是改变|type|unstyled|depth|inlineStyleRanges|entityRanges|data|513440|​|513441|.tall-img{
++++margin-top:-50%25;
++++width:100%25;
}
.wide-img{
++++margin-left:-50%25;
++++height:100%25;
}|code-block|syntax|javascript|513442|513443|至|513444|513445|.wide-img{
++++margin-left:-42%25;
++++height:100%25;
}
.tall-img{
++++margin-top:-42%25;
++++width:100%25;
}|513446|513447|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|V|8|@]|9|@]|A|$]]|$1|L|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|X|8|@]|9|@]|A|$G|H]]|$1|O|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|Q|$]]

<p>im not allowed to 'add a comment' so doing this , but yea what Eru Penkman did is pretty much spot on , to get it like background cover all you need to do is change </p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>.tall-img{
    margin-top:-50%;
    width:100%;
}
.wide-img{
    margin-left:-50%;
    height:100%;
}</code></pre>
</div>
</div>
</p>

<p>TO</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>.wide-img{
    margin-left:-42%;
    height:100%;
}
.tall-img{
    margin-top:-42%;
    width:100%;
}</code></pre>
</div>
</div>
</p>


blocks|key|513486|text|假设你可以安排一个你想要填充的容器元素，这看起来是可行的，但感觉有点老土。本质上，我只是在更大的区域上使用min/max-width/height，然后将该区域缩放回原始尺寸。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|513487|​|513488|.container+{
++width:+800px;
++height:+300px;
++border:+1px+solid+black;
++overflow:hidden;
++position:relative;
}
.container.contain+img+{
++position:+absolute;
++left:-10000%25;+right:+-10000%25;+
++top:+-10000%25;+bottom:+-10000%25;
++margin:+auto+auto;
++max-width:+10%25;
++max-height:+10%25;
++-webkit-transform:scale(10);
++transform:+scale(10);
}
.container.cover+img+{
++position:+absolute;
++left:-10000%25;+right:+-10000%25;+
++top:+-10000%25;+bottom:+-10000%25;
++margin:+auto+auto;
++min-width:+1000%25;
++min-height:+1000%25;
++-webkit-transform:scale(0.1);
++transform:+scale(0.1);
}|code-block|syntax|javascript|513489|<h1>contain</h1>
++<div+class="container+contain">
++++<img+
+++++++src="https://www.google.de/logos/doodles/2014/european-parliament-election-2014-day-4-5483168891142144-hp.jpg"+
+++++++/>
++++
++</div>
++<h1>cover</h1>
++<div+class="container+cover">
++++<img+
+++++++src="https://www.google.de/logos/doodles/2014/european-parliament-election-2014-day-4-5483168891142144-hp.jpg"+
+++++++/>
++++
++</div>|513490|513491|entityMap^0|1H|K|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|V|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|Q|$]]

<p>Assuming you can arrange to have a container element you wish to fill, this appears to work, but feels a bit hackish. In essence, I just use <code>min/max-width/height</code> on a larger area and then scale that area back into the original dimensions.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
  width: 800px;
  height: 300px;
  border: 1px solid black;
  overflow:hidden;
  position:relative;
}
.container.contain img {
  position: absolute;
  left:-10000%; right: -10000%; 
  top: -10000%; bottom: -10000%;
  margin: auto auto;
  max-width: 10%;
  max-height: 10%;
  -webkit-transform:scale(10);
  transform: scale(10);
}
.container.cover img {
  position: absolute;
  left:-10000%; right: -10000%; 
  top: -10000%; bottom: -10000%;
  margin: auto auto;
  min-width: 1000%;
  min-height: 1000%;
  -webkit-transform:scale(0.1);
  transform: scale(0.1);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;contain&lt;/h1&gt;
  &lt;div class="container contain"&gt;
    &lt;img 
       src="https://www.google.de/logos/doodles/2014/european-parliament-election-2014-day-4-5483168891142144-hp.jpg" 
       /&gt;
    &lt;!-- 366x200 --&gt;
  &lt;/div&gt;
  &lt;h1&gt;cover&lt;/h1&gt;
  &lt;div class="container cover"&gt;
    &lt;img 
       src="https://www.google.de/logos/doodles/2014/european-parliament-election-2014-day-4-5483168891142144-hp.jpg" 
       /&gt;
    &lt;!-- 366x200 --&gt;
  &lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|513543|text|实际上有一个非常简单的css+solution，它甚至可以在IE8上工作：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|513544|​|513545|.container+{
++position:+relative;
++overflow:+hidden;
++/*+Width+and+height+can+be+anything.+*/
++width:+50vw;
++height:+50vh;
}

img+{
++position:+absolute;
++/*+Position+the+image+in+the+middle+of+its+container.+*/
++top:+-9999px;
++right:+-9999px;
++bottom:+-9999px;
++left:+-9999px;
++margin:+auto;
++/*+The+following+values+determine+the+exact+image+behaviour.+*/
++/*+You+can+simulate+background-size:+cover/contain/etc.
+++++by+changing+between+min/max/standard+width/height+values.
+++++These+values+simulate+background-size:+cover
++*/
++min-width:+100%25;
++min-height:+100%25;
}|code-block|syntax|javascript|513546|<div+class="container">
++++<img+src="http://placehold.it/200x200"+alt=""+/>
</div>|513547|513548|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/BuschFunker/sjt71j99/^0|B|C|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|6|7|Z|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|10|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|H|7|11|8|@]|9|@]|C|$I|J]]|$1|M|3|E|5|6|7|12|8|@]|9|@]|C|$]]|$1|N|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|O|$P|$5|Q|R|S|C|$T|U]]]]

<p>There is actually quite a simple <a href="http://jsfiddle.net/BuschFunker/sjt71j99/">css solution</a> which even works on IE8:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
  position: relative;
  overflow: hidden;
  /* Width and height can be anything. */
  width: 50vw;
  height: 50vh;
}

img {
  position: absolute;
  /* Position the image in the middle of its container. */
  top: -9999px;
  right: -9999px;
  bottom: -9999px;
  left: -9999px;
  margin: auto;
  /* The following values determine the exact image behaviour. */
  /* You can simulate background-size: cover/contain/etc.
     by changing between min/max/standard width/height values.
     These values simulate background-size: cover
  */
  min-width: 100%;
  min-height: 100%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;img src="http://placehold.it/200x200" alt="" /&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|513589|text|您可以使用'style‘属性将背景图像添加到元素中，这样您仍然可以在HTML中调用图像，但仍然可以使用background-size:+cover+css行为：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|513590|HTML：|513591|++++<div+class="image-div"+style="background-image:url(yourimage.jpg)">
++++</div>|code-block|syntax|javascript|513592|CSS：|513593|++++.image-div{
++++background-size:+cover;
++++}|513594|这就是我如何向需要动态加载到HTML中的元素添加background-size:+cover行为的方法。然后你可以使用非常棒的css类，比如background-position:+center。轰隆|513595|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>What you could do is use the 'style' attribute to add the background image to the element, that way you will still be calling the image in the HTML but you will still be able to use the background-size: cover css behaviour:</p>

<p>HTML:</p>

<pre><code>    &lt;div class="image-div" style="background-image:url(yourimage.jpg)"&gt;
    &lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>    .image-div{
    background-size: cover;
    }
</code></pre>

<p>This is how I add the background-size: cover behaviour to elements that I need to dynamically load into HTML. You can then use awesome css classes like background-position: center. boom</p>


blocks|key|297058|text|我需要模拟background-size:+contain，但由于缺乏支持而无法使用object-fit。我的图像有定义尺寸的容器，这对我来说是有效的：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|297059|​|297060|.image-container+{
++height:+200px;
++width:+200px;
++overflow:+hidden;
++background-color:+rebeccapurple;
++border:+1px+solid+yellow;
++position:+relative;
}

.image+{
++max-height:+100%25;
++max-width:+100%25;
++margin:+auto;
++position:+absolute;
++transform:+translate(-50%25,+-50%25);
++top:+50%25;
++left:+50%25;
}|code-block|syntax|javascript|297061|
<div+class="image-container">
++<img+class="image"+src="http://placehold.it/300x100">
</div>


<div+class="image-container">
++<img+class="image"+src="http://placehold.it/100x300">
</div>|297062|297063|entityMap^0|5|O|16|A|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|X|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|Q|$]]

<p>I needed to emulate <code>background-size: contain</code>, but couldn't use <code>object-fit</code> due to the lack of support. My images had containers with defined dimensions and this ended up working for me:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.image-container {
  height: 200px;
  width: 200px;
  overflow: hidden;
  background-color: rebeccapurple;
  border: 1px solid yellow;
  position: relative;
}

.image {
  max-height: 100%;
  max-width: 100%;
  margin: auto;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- wide --&gt;
&lt;div class="image-container"&gt;
  &lt;img class="image" src="http://placehold.it/300x100"&gt;
&lt;/div&gt;

&lt;!-- tall --&gt;
&lt;div class="image-container"&gt;
  &lt;img class="image" src="http://placehold.it/100x300"&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|297112|text|我知道这是旧的，但是我在上面看到的许多解决方案都有一个问题，图像/视频对于容器来说太大了，所以实际上不像背景大小的封面。然而，我决定制作“实用程序类”，这样它就可以用于图像和视频。您只需为容器提供类.media-cover-wrapper，并为媒体项本身提供类.media-cover|type|unstyled|depth|inlineStyleRanges|entityRanges|data|297113|然后，您将拥有以下jQuery：|297114|function+adjustDimensions(item,+minW,+minH,+maxW,+maxH)+{
++item.css({
++minWidth:+minW,
++minHeight:+minH,
++maxWidth:+maxW,
++maxHeight:+maxH
++});
}+//+end+function+adjustDimensions

function+mediaCoverBounds()+{
++var+mediaCover+=+$('.media-cover');

++mediaCover.each(function()+{
+++adjustDimensions($(this),+'',+'',+'',+'');
+++var+mediaWrapper+=+$(this).parent();
+++var+mediaWrapperWidth+=+mediaWrapper.width();
+++var+mediaWrapperHeight+=+mediaWrapper.height();
+++var+mediaCoverWidth+=+$(this).width();
+++var+mediaCoverHeight+=+$(this).height();
+++var+maxCoverWidth;
+++var+maxCoverHeight;

+++if+(mediaCoverWidth+>+mediaWrapperWidth+&&+mediaCoverHeight+>+mediaWrapperHeight)+{

+++++if+(mediaWrapperHeight/mediaWrapperWidth+>+mediaCoverHeight/mediaCoverWidth)+{
+++++++maxCoverWidth+=+'';
+++++++maxCoverHeight+=+'100%25';
+++++}+else+{
+++++++maxCoverWidth+=+'100%25';
+++++++maxCoverHeight+=+'';
+++++}+//+end+if

+++++adjustDimensions($(this),+'',+'',+maxCoverWidth,+maxCoverHeight);
+++}+else+{
+++++adjustDimensions($(this),+'100%25',+'100%25',+'',+'');
+++}+//+end+if
+});+//+end+mediaCover.each
}+//+end+function+mediaCoverBounds|code-block|syntax|javascript|297115|当调用它时，一定要注意页面大小的调整：|297116|mediaCoverBounds();

$(window).on('resize',+function(){
++mediaCoverBounds();
});|297117|然后是下面的CSS：|297118|.media-cover-wrapper+{
++position:+relative;
++overflow:+hidden;
}

.media-cover-wrapper+.media-cover+{
++position:+absolute;
++z-index:+-1;
++top:+50%25;
++left:+50%25;
++-ms-transform:+translate(-50%25,+-50%25);
++-moz-transform:+translate(-50%25,+-50%25);
++-webkit-transform:+translate(-50%25,+-50%25);
++transform:+translate(-50%25,+-50%25);
}|297119|是的，它可能需要jQuery，但它的响应相当好，行为完全像背景大小:封面，你可以在图片和/或视频上使用它来获得额外的SEO值。|297120|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

<p>I know this is old, however many solutions I see above have an issue with the image/video being too large for the container so not actually acting like background-size cover. However, I decided to make "utility classes" so that it would work for images and videos. You simply give the container the class .media-cover-wrapper and the media item itself the class .media-cover </p>

<p>Then you have the following jQuery:</p>

<pre><code>function adjustDimensions(item, minW, minH, maxW, maxH) {
  item.css({
  minWidth: minW,
  minHeight: minH,
  maxWidth: maxW,
  maxHeight: maxH
  });
} // end function adjustDimensions

function mediaCoverBounds() {
  var mediaCover = $('.media-cover');

  mediaCover.each(function() {
   adjustDimensions($(this), '', '', '', '');
   var mediaWrapper = $(this).parent();
   var mediaWrapperWidth = mediaWrapper.width();
   var mediaWrapperHeight = mediaWrapper.height();
   var mediaCoverWidth = $(this).width();
   var mediaCoverHeight = $(this).height();
   var maxCoverWidth;
   var maxCoverHeight;

   if (mediaCoverWidth &gt; mediaWrapperWidth &amp;&amp; mediaCoverHeight &gt; mediaWrapperHeight) {

     if (mediaWrapperHeight/mediaWrapperWidth &gt; mediaCoverHeight/mediaCoverWidth) {
       maxCoverWidth = '';
       maxCoverHeight = '100%';
     } else {
       maxCoverWidth = '100%';
       maxCoverHeight = '';
     } // end if

     adjustDimensions($(this), '', '', maxCoverWidth, maxCoverHeight);
   } else {
     adjustDimensions($(this), '100%', '100%', '', '');
   } // end if
 }); // end mediaCover.each
} // end function mediaCoverBounds
</code></pre>

<p>When calling it make sure to take care of page resizing:</p>

<pre><code>mediaCoverBounds();

$(window).on('resize', function(){
  mediaCoverBounds();
});
</code></pre>

<p>Then the following CSS:</p>

<pre><code>.media-cover-wrapper {
  position: relative;
  overflow: hidden;
}

.media-cover-wrapper .media-cover {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</code></pre>

<p>Yeah it may require jQuery but it responds quite well and acts exactly like background-size: cover and you can use it on image and/or videos to get that extra SEO value.</p>


blocks|key|513801|text|我们可以采取变焦方式。我们可以假设，如果纵横比图像的高度或宽度小于所需的高度或宽度，则最大30%25+(或更多，最高可达100%25)可以是缩放效果。我们可以用overflow:+hidden来隐藏其余不需要的区域。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|513802|.image-container+{
++width:+200px;
++height:+150px;
++overflow:+hidden;
}
.stage-image-gallery+a+img+{
++max-height:+130%25;
++max-width:+130%25;
++position:+relative;
++top:+50%25;
++left:+50%25;
++transform:+translateX(-50%25)+translateY(-50%25);
}|code-block|syntax|javascript|513803|这将调整不同宽度或高度的图像。|513804|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>We can take ZOOM approach. We can assume that max 30% (or more upto 100%) can be the zooming effect if aspect image height OR width is less than the desired height OR width. We can hide the rest not needed area with overflow: hidden.</p>

<pre><code>.image-container {
  width: 200px;
  height: 150px;
  overflow: hidden;
}
.stage-image-gallery a img {
  max-height: 130%;
  max-width: 130%;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
</code></pre>

<p>This will adjust images with different width OR height.</p>


blocks|key|513869|text|我找到了一个简单的解决方案来模拟封面和容器，它是纯CSS，适用于动态尺寸的容器，也不会对图像比例做任何限制。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|513870|请注意，如果你不需要支持IE或16之前的Edge，那么你最好使用object-fit。|513871|背景-大小:封面|513872|​|513873|.img-container+{
++position:+relative;
++overflow:+hidden;
}

.background-image+{
++position:+absolute;
++min-width:+1000%25;
++min-height:+1000%25;
++left:+50%25;
++top:+50%25;
++transform:+translateX(-50%25)+translateY(-50%25)+scale(0.1);
++z-index:+-1;
}|code-block|syntax|javascript|513874|<div+class="img-container">
++<img+class="background-image"+src="https://picsum.photos/1024/768/?random">
++<p+style="padding:+20px;+color:+white;+text-shadow:+0+0+10px+black">
++++Lorem+ipsum+dolor+sit+amet,+consectetur+adipiscing+elit,+sed+do+eiusmod+tempor+incididunt+ut+labore+et+dolore+magna+aliqua.+Ut+enim+ad+minim+veniam,+quis+nostrud+exercitation+ullamco+laboris+nisi+ut+aliquip+ex+ea+commodo+consequat.+Duis+aute+irure+dolor+in+reprehenderit+in+voluptate+velit+esse+cillum+dolore+eu+fugiat+nulla+pariatur.+Excepteur+sint+occaecat+cupidatat+non+proident,+sunt+in+culpa+qui+officia+deserunt+mollit+anim+id+est+laborum.
++</p>
</div>|513875|513876|此处使用1000%25，以防图像的自然大小大于正在显示的大小。例如，如果镜像是500x500，但容器只有200x200。使用此解决方案，图像大小将调整为2000x2000+(由于最小宽度/最小高度)，然后缩小到200x200+(由于transform:+scale(0.1))。|offset|length|style|CODE|513877|x10因子可以由x100或x1000替换，但在20x20的div上渲染2000x2000图像通常并不理想。:)|513878|背景-大小:包含|513879|遵循相同的原则，您还可以使用它来模拟background-size:+contain：|513880|.img-container+{
++position:+relative;
++overflow:+hidden;
++z-index:+0;
}

.background-image+{
++position:+absolute;
++max-width:+10%25;
++max-height:+10%25;
++left:+50%25;
++top:+50%25;
++transform:+translateX(-50%25)+translateY(-50%25)+scale(10);
++z-index:+-1;
}|513881|<div+style="background-color:+black">
++<div+class="img-container">
++++<img+class="background-image"+src="https://picsum.photos/1024/768/?random">
++++<p+style="padding:+20px;+color:+white;+text-shadow:+0+0+10px+black">
++++++Lorem+ipsum+dolor+sit+amet,+consectetur+adipiscing+elit,+sed+do+eiusmod+tempor+incididunt+ut+labore+et+dolore+magna+aliqua.+Ut+enim+ad+minim+veniam,+quis+nostrud+exercitation+ullamco+laboris+nisi+ut+aliquip+ex+ea+commodo+consequat.+Duis+aute+irure+dolor+in+reprehenderit+in+voluptate+velit+esse+cillum+dolore+eu+fugiat+nulla+pariatur.+Excepteur+sint+occaecat+cupidatat+non+proident,+sunt+in+culpa+qui+officia+deserunt+mollit+anim+id+est+laborum.
++++</p>
++</div>
</div>|513882|513883|entityMap^0|0|0|0|0|0|0|0|36|L|0|0|0|I|O|0|0|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|19|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1A|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|1B|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|1C|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|J|7|1D|8|@]|9|@]|A|$K|L]]|$1|O|3|G|5|6|7|1E|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1F|8|@$R|1G|S|1H|T|U]]|9|@]|A|$]]|$1|V|3|W|5|6|7|1I|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|1J|8|@]|9|@]|A|$]]|$1|Z|3|10|5|6|7|1K|8|@$R|1L|S|1M|T|U]]|9|@]|A|$]]|$1|11|3|12|5|J|7|1N|8|@]|9|@]|A|$K|L]]|$1|13|3|14|5|J|7|1O|8|@]|9|@]|A|$K|L]]|$1|15|3|G|5|6|7|1P|8|@]|9|@]|A|$]]|$1|16|3|-4|5|6|7|1Q|8|@]|9|@]|A|$]]]|17|$]]

<p>I found a simple solution to emulate both cover and contain, which is pure CSS, and works for containers with dynamic dimensions, and also doesn't make any restriction on the image ratio.</p>

<p>Note that if you don't need to support IE, or Edge before 16, then you better use object-fit.</p>

<h2>background-size: cover</h2>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.img-container {
  position: relative;
  overflow: hidden;
}

.background-image {
  position: absolute;
  min-width: 1000%;
  min-height: 1000%;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) scale(0.1);
  z-index: -1;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="img-container"&gt;
  &lt;img class="background-image" src="https://picsum.photos/1024/768/?random"&gt;
  &lt;p style="padding: 20px; color: white; text-shadow: 0 0 10px black"&gt;
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  &lt;/p&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>The 1000% is used here in case the image natural size is bigger than the size it is being displayed. For example, if the image is 500x500, but the container is only 200x200. With this solution, the image will be resized to 2000x2000 (due to min-width/min-height), then scaled down to 200x200 (due to <code>transform: scale(0.1)</code>).</p>

<p>The x10 factor can be replaced by x100 or x1000, but it is usually not ideal to have a 2000x2000 image being rendered on a 20x20 div. :)</p>

<h2>background-size: contain</h2>

<p>Following the same principle, you can also use it to emulate <code>background-size: contain</code>:
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.img-container {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.background-image {
  position: absolute;
  max-width: 10%;
  max-height: 10%;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) scale(10);
  z-index: -1;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="background-color: black"&gt;
  &lt;div class="img-container"&gt;
    &lt;img class="background-image" src="https://picsum.photos/1024/768/?random"&gt;
    &lt;p style="padding: 20px; color: white; text-shadow: 0 0 10px black"&gt;
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    &lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>I have a site with many pages and different background pictures, and I display them from CSS like:</p>



<pre class="lang-css prettyprint-override"><code>body.page-8 {
    background: url("../img/pic.jpg") no-repeat scroll center top #000;
    background-size: cover;
}
</code></pre>

<p>However, I want to show different (fullscreen) pictures on one page using <code>&lt;img&gt;</code> elements, and I want them to have the same properties as the above  <code>background-image: cover;</code> property (the images cant be displayed from CSS, they must be displayed from the HTML document).</p>

<p>Normally I use:</p>

<pre class="lang-css prettyprint-override"><code>div.mydiv img {
    width: 100%;
}
</code></pre>

<p>Or:</p>

<pre class="lang-css prettyprint-override"><code>div.mydiv img {
    width: auto;
}
</code></pre>

<p>to make the picture full and responsive. However the picture shrinks too much (<code>width: 100%</code>) when the screen gets too narrow, and shows the body's background-color in the bottom screen. The other method, <code>width: auto;</code>, only makes the image full size and does not respond to the screen size.</p>

<p>Is there a way to display the image the same way that <code>background-size: cover</code> does?</p>


Is there an equivalent to background-size: cover and contain for image elements?

容器

jQuery

我有一个有许多页面和不同背景图片的网站，我从CSS中显示它们，如下所示：body.page-8 {    background: url("../img/pic.jpg") no-repeat scroll center top #000;    background-size: cover;}然而，我希望使用<img...

问对于图像元素，有没有等价物background-size: cover和contain？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问对于图像元素，有没有等价物background-size: cover和contain？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问对于图像元素，有没有等价物background-size: cover和contain？
EN