Mimic the css background cover img property in html

Question

Thanks all for your responses. However, I haven't found any good answer to my question. So let me be more clear.

PURPOSE

As I'm working on SEO, I need to include images as html elements and mimic all the css attributes.

What I currently have

I added images within the css in order to expand/stretch and always center them in the middle of a div.

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

Here is a jsfidle example

As you can see, the center of the image is always centered, without any crop/distortion inside the div.

What I need

I want to integrate images as html element and mimic the previous jsfidle.

Here is the jsfidle with an html image

Thanks

Answer 1

Try

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

Its not perfect, but I think you may be able to do something like this:

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("https://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="https://i.stack.imgur.com/vNQ2g.png" alt="example" title="example" />
</div>
<div class="cover"></div>

Answer 3

You have several possible solutions:

1. Combine tag and background image

This one is easiest. You put image in your markup like you would normally but hide it and use background-image on parent element. All modern browsers will download your image only once and cache it so you don't need to worry about performance. Just mind your image has correct path depending on file.

Example:

<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 hacks

Check out this article: https://css-tricks.com/perfect-full-page-background-image/

There are several techniques listed there. This one worked for me:

.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. Object-fit property

img { object-fit: cover; }

This is new property that is basically background-size version for images in markup. Unfortunately, browser support is not there yet.

Resources:

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

Answer 4

You can do this using an HTML <img> tag, and pure CSS to resize the image. This way you have the image as an HTML element for SEO purposes, but you don't have to use JavaScript to responsively change the size.

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 5

Assuming the image is at least as large as it's container, you can just use (assuming the style applies to an IMG element)

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