Image size 100 % - CSS HELP

by 8 replies
10
Hi!

I try to do this:

I have an element, and i want the background image to be all over the background.

e.g.
<div id="mydiv">
</div>

#mydiv{width:100%; height:100%;background:url(images/image1.jpg) no-repeat; background-size:cover;}

If i want, to do this:

<div id="mydiv">
<img src="images/image1.jpg">
</div>

#mydiv{width:100%; height:100%;}
#mydiv img{}

How can i make the same effect, with the image, to be cover all over the div????
But, without background-size:cover. Is it possible???
#programming #100 #css #image #size
  • Hey,

    Try this.

    <img src="images/image1.jpg" width="100%" height="100%" />

    You can also add class to this image and make sure it have width and height set to 100%.
  • I want the image to be resize 100% at width and at height. To fill my screen, even if image will be cropped.
    With this solution, the image will be distorted. I dont want to be distorted.
    That's not the correct solution, but thanks anyway.
  • georgeweb13, I made a jsFiddle for you to check out at : Edit fiddle - JSFiddle

    This code will force the image to fill the container, and if you add the "stretch" class to the image it will make it a bit bigger than the container while still keeping the aspect ratio. Hope that's what you're looking for.
    • [ 1 ] Thanks
  • Thanks Ttrain.
    I will check it ASAP.

    Thanks for your try and your help!
  • It worked somehow, but not as exactly as i wanted.
    I want to fill all the cover box. To be filled and to its height. Like background-size:cover
  • @OP I have created an HTML page for you to explain how to do this, there are several ways of achieving the same result but the basic idea is this:

    div.full-bg {
    width:100%;
    height:100%;
    position:absolute;
    }

    div.full-bg img {
    width:100%;
    height:100%;
    position:absolute;
    }

    You can see an example @ Background Image If you would like to share your html code for me to see it and perhaps reconstruct the code respectively, do so and i will look into it again.

    Mr Alexander
    • [ 1 ] Thanks
  • Thanks for your help, but it didnt worked!
    :-(
    The image is disorted when i change the resolution.
    • [1] reply
    • If you provide me with the URL i can look into it in more details and determine the best course of action, its hard without knowing some details.

      Are you able to change the html or just the css?
Join the discussion

Next Topics on Trending Feed