模仿 css 背景封面 img 属性 in html

Question

感谢大家的回复。但是，我还没有找到我的问题的任何好的答案。所以让我更清楚。

目的

由于我在进行 SEO，因此我需要将图像作为 html 元素并模仿所有 css 属性。

我目前拥有的

我在 css 中添加了图像以便 expand/stretch 并始终将它们居中 div。

.page-electricite-generale .one {
    background: url('assets/images/elec/XXXX.jpg') 50% 50% no-repeat;
    background-size: cover;
}

Here is a jsfidle example

可以看到，图片的中心始终居中，div里面没有任何crop/distortion。

我需要的

我想将图像集成为 html 元素并模仿以前的 jsfidle。

Here is the jsfidle with an html image

谢谢

Answer 1

尝试

elem.prepend(
    $("<img />", {
        "src":"assets/images/elec/XXXX.jpg",
        "width":elem.css("width"),
        "height":elem.css("height"),
        "css": {
            "position":"relative",
            "left":((parseInt(elem.parent().css("width")) 
                   - parseInt(elem.css("width"))) / 2) + "px"
        }
    })
);

jsfiddle http://jsfiddle.net/guest271314/th2LefL1/

Answer 2

它并不完美，但我认为您可以这样做：

Working Example

 function back() {
   var h = $('img').parent().height(),
     w = $('img').parent().width();

   if (w <= h) {
     $('img').each(function() {
       $(this).css({
         height: $(this).parent().height(),
         minHeight: $(this).parent().height(),
         minWidth: $(this).parent().width(),
         width: 'auto'
       });
     });
   } else {
     $('img').each(function() {
       $(this).css({
         width: $(this).parent().width(),
         minHeight: $(this).parent().height(),
         minWidth: $(this).parent().width(),
         height: 'auto'
       });
     });
   }
 };

 $(window).load(back());
 $(window).resize(function() {
   back();
 });

html,
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}
.wrap {
  overflow: hidden;
  height: 50%;
  width: 50%;
}
.cover {
  background: url("http://i.stack.imgur.com/vNQ2g.png") no-repeat scroll 0% 0% / cover transparent;
  height: 50%;
  width: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="wrap">
  <img src="http://i.stack.imgur.com/vNQ2g.png" alt="example" title="example" />
</div>
<div class="cover"></div>

Answer 3

您可以使用 HTML <img> 标签和纯 CSS 来调整图像大小。这样您就可以将图像作为 HTML 元素用于 SEO 目的，但您不必使用 JavaScript 来响应地更改大小。

HTML

<img src='assets/images/elec/XXXX.jpg'>

CSS

img.bg {
/* Set rules to fill background */
   min-height: 100%;
   min-width: 1024px;

/* Set up proportionate scaling */
    width: 100%;
    height: auto;

/* Set up positioning */
    position: fixed;
    top: 0;
    left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
    img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
    }
}

Answer 4

假设图像至少与其容器一样大，您可以直接使用（假设样式适用于 IMG 元素）

.page-electricite-generale .one {
    max-width: 100%
    max-height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
}

Answer 5

您有几种可能的解决方案：

1.结合标签和背景图片

这个最简单。您像往常一样将图像放在标记中，但将其隐藏并在父元素上使用背景图像。所有现代浏览器只会下载您的图像一次并缓存它，因此您无需担心性能问题。请注意，您的图像根据文件具有正确的路径。

示例：

<div class="img-holder">
  <img class="hidden" src="/assets/images/elec/XXXX.jpg" />
</div>


.hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.img-holder {
    background: url(assets/images/elec/XXXX.jpg) 50% 50% no-repeat;
    background-size: cover;
    // define your container width and height
}

2。 CSS 黑客

查看这篇文章：https://css-tricks.com/perfect-full-page-background-image/

那里列出了几种技术。这个对我有用：

.parent {
  position: absolute; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}

.parent img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

3。对象匹配属性

img { object-fit: cover; }

这是新的属性，基本上是标记中图像的 background-size 版本。不幸的是，还没有浏览器支持。

资源：

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit http://caniuse.com/#feat=object-fit

模仿 css 背景封面 img 属性 in html

Mimic the css background cover img property in html

html

jquery

cover

background-image