seo Question posted in
Some basic information to get you started with this can be found here.

Mimic the css background cover img property in html – SEO

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

Tags:

5

Answers


  1. 0

    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/

    Login or Signup to reply.
  2. 0

    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("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>
    Login or Signup to reply.
  3. 0

    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% */
    }
}
    Login or Signup to reply.
  4. 0

    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;
}
    Login or Signup to reply.
  5. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search