Html 图像元素是否有与背景尺寸相同的尺寸：覆盖和包含？

我有一个包含许多页面和不同背景图片的网站，我通过CSS显示它们，如：

body.page-8{
背景：url（“../img/pic.jpg”）无重复滚动中心顶部#000；
背景尺寸：封面；
}

但是，我希望使用

元素在一个页面上显示不同的（全屏）图片，并且我希望它们具有与上述

背景图像相同的属性：cover属性（图像不能从CSS显示，必须从HTML文档显示）

通常我使用：

div.mydiv img{
宽度：100%；
}

或：

div.mydiv img{
宽度：自动；
}

使图片完整、反应灵敏。但是，当屏幕变得太窄时，图片会缩小太多（
宽度：100%
），并在底部屏幕中显示身体的背景色。另一种方法，
width:auto，仅使图像为全尺寸，不响应屏幕大小

有没有一种方法可以像
背景尺寸：cover
那样显示图像？
对于IE，还需要包括第二行宽度：100%

.mydiv img {
    max-width: 100%;
    width: 100%;
}

遇到了同样的问题。以上操作对我有效。
尝试设置
最小高度
和
最小宽度
，使用
显示：块
：

img {
    display:block;
    min-height:100%;
    min-width:100%;
}

（）

如果图像的包含元素是
position:relative
或
position:absolute
，则图像将覆盖容器。然而，它将不会居中

如果您知道图像是水平溢出（设置
左侧边距：-50%
）还是垂直溢出（设置
顶部边距：-50%
），则可以轻松将图像居中。也许可以使用CSS媒体查询（和一些数学）来解决这个问题。
不，你不能像
背景尺寸：封面那样得到它，但是..

这种方法非常接近：它使用JavaScript确定图像是横向还是纵向，并相应地应用样式

JS

CSS

我不允许这样做“添加评论”，但是的，艾鲁·彭克曼所做的是非常正确的，要想让它像背景封面一样，你所需要做的就是改变


。高img{
利润率最高：-50%；
宽度：100%；
}
.宽img{
左边缘：-50%；
身高：100%；
}
解决方案#1-解决方案（）
只需设置
对象匹配：封面


正文{
保证金：0；
}
img{
显示：块；
宽度：100vw；
高度：100vh；
对象匹配：覆盖；/*或对象匹配：包含*/
}
假设您可以安排一个您希望填充的容器元素，这看起来是可行的，但感觉有点不太正常。本质上，我只是在更大的区域上使用
min/max width/height
，然后将该区域缩放回原始尺寸


.container{
宽度：800px；
高度：300px；
边框：1px纯黑；
溢出：隐藏；
位置：相对位置；
}
.container.contain img{
位置：绝对位置；
左：-10000%；右：-10000%；
顶部：-10000%；底部：-10000%；
保证金：自动；
最大宽度：10%；
最大高度：10%；
-webkit转换：规模（10）；
变换：标度（10）；
}
.container.cover.img{
位置：绝对位置；
左：-10000%；右：-10000%；
顶部：-10000%；底部：-10000%；
保证金：自动；
最小宽度：1000%；
最小高度：1000%；
-webkit变换：比例（0.1）；
变换：比例（0.1）；
}
包含
盖
实际上有一个非常简单的方法甚至可以在IE8上使用：


.container{
位置：相对位置；
溢出：隐藏；
/*宽度和高度可以是任何东西*/
宽度：50vw；
高度：50vh；
}
img{
位置：绝对位置；
*将图像定位在容器的中部。*
顶部：-9999px；
右：-9999px；
底部：-9999px；
左：-9999px；
保证金：自动；
/*以下值确定图像的确切行为*/
/*您可以模拟背景大小：cover/contain/etc。
通过在最小/最大/标准宽度/高度值之间进行更改。
这些值模拟背景大小：封面
*/
最小宽度：100%；
最小高度：100%；
}
使用CSS，您可以模拟对象匹配：[cover | contain]。它使用
变换
和
[max | min]-[width | height]
。
它不是完美的。这在一种情况下不起作用：如果图像比容器宽而短


.img-ctr{
背景：红色；/*仅在包含模式下可见*/
边框：1px纯黑；
高度：300px；
宽度：600px；
溢出：隐藏；
位置：相对位置；
显示：块；
}
.img{
显示：块；
/*包含：*/
/*最大高度：100%；
最大宽度：100%*/
/*--*/
/*盖子（不适用于比容器宽和短的图像）：*/
最小高度：100%；
宽度：100%；
/*--*/
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
大正方形：

小广场：

大型景观：

小景观：

大型肖像：

小画像：

超薄人像：

超宽景观（图像比容器宽且短）：
您可以使用“style”属性将背景图像添加到元素中，这样您仍然可以在HTML中调用图像，但仍然可以使用背景大小：封面css行为：

HTML:

这就是我如何向需要动态加载到HTML中的元素添加背景大小：封面行为的方法。然后你可以使用很棒的css类，比如backgroundposition:center。boom
我需要模拟
背景大小：contain
，但由于缺乏支持，无法使用
对象匹配。我的图像具有定义尺寸的容器，这最终对我有效：


.image容器{
嗨
img {
    display:block;
    min-height:100%;
    min-width:100%;
}

 $('.myImages img').load(function(){
        var height = $(this).height();
        var width = $(this).width();
        console.log('widthandheight:',width,height);
        if(width>height){
            $(this).addClass('wide-img');
        }else{
            $(this).addClass('tall-img');
        }
    });

.tall-img{
    margin-top:-50%;
    width:100%;
}
.wide-img{
    margin-left:-50%;
    height:100%;
}

    <div class="image-div" style="background-image:url(yourimage.jpg)">
    </div>

    .image-div{
    background-size: cover;
    }

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%';
     } else {
       maxCoverWidth = '100%';
       maxCoverHeight = '';
     } // end if

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

mediaCoverBounds();

$(window).on('resize', function(){
  mediaCoverBounds();
});

.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%);
}

.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%);
}