Responsive images and text transitions

StackOverflow https://stackoverflow.com/questions/21701506

Question

How can i make a responsive image that fits 100% width and 100% height on both iphone and desktops. I mean like this - http://themeforest.unitedthemes.com/wpversions/brooklyn/elegant/ It is ok if it sacrifices a little of the image from either side but it should maintain the aspect ratio and it should fit the entire screen i have tried to do it but to no avail

And i have noticed the transitions and the text on the images at the top. how do we do that.

Here is my code so far

HTML

<div id="body">
    <div>
        <img src="1.jpg" class="image" />
    </div>
</div>

CSS

.image {
    position: absolute;
    top: 0;
    left: 0;
    max - width: 100 % ;
    max - height: 100 % ;
    width: auto;
}

But here the thing is that the image isnt fit to the height and width of the screen. How do I achieve the aforementioned 100% width and height like in the link I gave.

Was it helpful?

Solution

Instead of using images to achieve this use a background image and set the following css :

#body{
  background-image:url(yourimgurl);
  background-position:50% 50%;
  background-size:cover;
}

It will cause your image to span the entire container and trim a bit off the sides when it's smaller.

Fiddle

OTHER TIPS

You need to do this:

  1. set height, width 100% to the <body>
  2. set height, width 100% to .image
  3. add your background-image
  4. add background-size: 100% (background-size 100% will cover the whole space)

Pen: http://codepen.io/anon/pen/aHiBn

Gist: https://gist.github.com/anonymous/8935834

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top