CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Daniel White
Daniel White

Reputation: 3377

make image 100% height but proportional width

I have a problem and I think I am just having trouble wording the question which is why I can't find an answer.

I have a site that has an image that spans 100% height on a column. When you're looking at it above a viewport width of 1000px it looks awesome. But as you scroll down it obviously distorts and is super stretched, like the image here:

enter image description here

My question is, how can I have an image that is not a background image, that stretches 100% height, but maintains aspect ratio. Kind of like the supersized js plugin, but only on a single div instead of the whole background.

a live version of the site can be seen at http://faithpointdallas.com/422studios

it works as desired in firefox and totally sucks in safari. Any way to accomplish the firefox result in all browsers?

Thanks ahead of time for the help.

Upvotes: 1

Views: 3180

Answers (2)

jgthms
jgthms

Reputation: 864

Why not use a background-image? There's the background-size property that does exactly what you want.

Remove the topImage div in your HTML and try this:

div.top {
  background: url("../img/dallas.jpg") no-repeat scroll center center / cover transparent;
  min-height: 300px;
  overflow: hidden;
  position: relative;
}

Upvotes: 2

Ravish Kumar
Ravish Kumar

Reputation: 632

I think you should use CSS to mention the width as 100%. It should solve your problem.

background-size: 100%;

for more do check here http://www.css3.info/preview/background-size/

Upvotes: 1

Related Questions