CODEWITHSUNDEEP
htmlimagescrollresizeresponsive-design
Felipe Mosso
Felipe Mosso

Reputation: 3927

how to make image size fix when browser screen is resized html

I have created a html page which simply has a div and an image inside of it. My problem is when I resize the browser screen, the image is also resized. I would like to make something to whenever the browser screen changes its width, for example, the image keeps the same resolution by showing scroll-x to see the entire image.

I could do it by doing some workaround. Please see the fiddle below: http://jsfiddle.net/EB2cq/

<div style="width: 1424px; ">
  <img src="http://1.bp.blogspot.com/_duWYbLDtB5s/RxD10qnsOZI/AAAAAAAAACc/9nPZhQRAVZ4/S658/google_logo_halloween_d-(mip.jpg"/>
</div>

As you can see I can scroll through the image when the browser screen changes its width. But in my case I don't want to see the width of a div cause I only want to show the scroll bar when it is really necessary.

If you remove width style attribute from div in the fiddle above, the behavior is what I'm expecting. The div gets the scroll x only when the width of the page is less than the width of the image. However, in my web application, the same thing does not happen. The image is also resized according to browser width.

What can I be missing here? I have exactly the same fiddle code in my web application

I took a look at this question but it has not helped so much: Get image to stay fixed even with window resize

Upvotes: 2

Views: 715

Answers (1)

pravat
pravat

Reputation: 475

Have you checked the style of the parent element(s). That might be the issue.

Upvotes: 0

Related Questions