CODEWITHSUNDEEP
javascripthtmlcssresponsive-designslider
user1780729
user1780729

Reputation: 518

responsive images and different pic resolutions

i have this website, and as you can see on the index page that we have a 80% width and 100% container and in it a picture. Now there is a problem with different images and their resolutions, some are stretched some are narrow. I want the pic to be full screen size and 80% width and to have proper aspect ratio. I would probably need some javascript to crop the images? please i need some insights on how to do that. Also a slider can do the trick if it has cropping feature and the possibility of 80% width and 100% height

here is the url

http://tinyurl.com/otwocvz

Upvotes: 1

Views: 73

Answers (1)

Leo Leoncio
Leo Leoncio

Reputation: 1729

try removing the image and add the image as header2 background.

.header2 {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
background-color: #CCC;
display: block;
background: url(http://leowd.com/wp-content/uploads/2014/08/leowd-umbrella-red2.jpg) no-repeat center center fixed;
background-size: cover; }

Upvotes: 1

Related Questions