I want to make an image fit a div whilst maintaining its aspect ratio. I have seen other posts where it is mentioned to use max-width:100%;.
when the image is smaller than the div, it works fine, the image is kept to a size within the div. But when the image is larger, it simply gets out of the div.
<img src="testimg.jpg" style="max-width:100%;max-height:100%;"/>
But when i use this code:
<img src="testimg.jpg" width=540px/>
The large image is resized to fit the div but does not maintain its aspect ratio.
Can any one advise on the above issue please?
This should mantain the aspect ratio:
<img src="testimg.jpg" style="max-width:100%; max-height:auto;"/>
I do not recomend using inline CSS, instead separate it:
CSS:
img{
max-width:100%;
max-height:auto;
}
HTML:
<img src="testimg.jpg" />
For the second part of your code, the width attribute represents the exact width of your image, not the maximum width. And in HTML5, the value must in pixels but without px suffix:
<img src="testimg.jpg" width="540" />
Again this is not a good practice, always use CSS to manipulate the HTML elements.
max-width:100% works only if the img tag has not width and height attributes, because they prevail on max-width. So please try to remove the width="540"
Please try the following CSS
div{ovwerflow:none;}
img{width:100%; max-height
Related
I have a problem.
I am creating a responsive header image, that would scale down to mobile and take the full width of the screen.
I would like to have done this with the img tag, and then applied a max-width of 100% but I wanted to include some text on top of this image, so chose to use a background image instead. I don't want to absolute the text over the images as this causes problems in mobile.
Also, regarding background image, I can't use background-size as this is not supported in ie8.
Is there any other way I can achieve having text over an image, where the image takes full width of the container, and full height of the image?
<div id="container" style="height: 100px; width:100px; display:block;">
<img src="some-img.jpg" style="display:block;"/>
<span style="position:absolute;">Text over image</span>
</div>
Essentially you just need to position the text over the image, within a parent.
z-index property is useful for "stacking" elements visually if you have several competing elements.
I'm creating an iPhone app using PhoneGap and jQuery mobile. I'm using a simple image tag and set the width to 100% and height to auto, but the image is not scaling properly and gets cut off. I have also tried using max-width with the same outcome. Any idea how I can solve this?
<div data-role="page">
<img class="banner" src="..." style="width: 100%; height: auto;">
</div>
I have even tried this:
$('img.banner').each(function(){
$(this).width($(window).width());
});
Previously i have gone through same problem. I tried min-height. And why both maximum-scale=1, minimum-scale=1? Try minimum-scale=1. Just give a try
I'm assuming that your image is actually nested in a div with a data-role="content" and your problem is that class ui-content by default has a 15px padding.
The simplest way to correct that would be to simply override the CSS for that page to get rid of that padding, if you need it for other elements then just wrap them in a div and add padding to those divs.
For example
CSS
.imgContPage { padding:0px; }
Markup
<div data-role="page">
<div data-role="content" class="imgContPage">
<img class="banner" src="http://dummyimage.com/600x400/000/fff.png&text=PlaceHolder" style="width: 100%; height: auto;">
</div>
</div>
Link to JSBin
Alternatively you can set a negative margin on your img to compensate for the padding, but then you will need to calculate the width so that it fills up to the right side.
Ok, I feel very stupid right now. I was getting that image from a JSON response that was coming from a Wordpress website. When I was parsing my JSON to get to the image, I was using the thumbnail version of the image (which in my surprise, it's not really a scaled thumbnail, it's just a cropped 150x150 square of the main image).
So I changed my reference from:
json.page.thumbnail
to
json.page.attachments[0].images.full.url
And now the image scales just fine (width: 100%, height: auto).
Thanks everyone for your helps
Say I have a div. If I give it a height and width of 500*500px in HTML code, like this: <div width="500px" height="500px">test</div> it will not have dimensions of 500*500px unless it's filled with enough code/text to push it to those dimensions. However, if I set the exact same width and height with CSS (either inline CSS or external document) like this: <div style="width:500px; height:500px;">test</div> the dimensions are always what I set.
Why is there a difference?
Doing this isn't valid syntax. You cant add width & height attributes to a DIV the same as you can to a table or an image tag.
<div width="500px" height="500px">test</div>
This is valid syntax:
<div style="width:500px; height:500px;">test</div>
A div tag does not have the attributes width and height.
How can I achieve the following layout? Specifically the positioning of Image and DIV
I've found that unless I set a specific width for the Div, it will just go on to the next line and take up the full width of the container. Additionally aligning it relative to the bottom of the image is giving me trouble. Currently they're both float:left
Edit: The two solutions so far work if the image is a constant width which I guess I could work with, but it's going in a Wordpress theme for an author's profile page and it's possible that images would have slightly variable widths. Is there a solution that would have the Div right next to the image (minus padding) regardless of how wide or narrow the image is? Basically having the div adjust its width to accommodate the image width.
Tested in IE7/8, Firefox, Chrome.
Live Demo #2
CSS:
#container{width:80%; padding:12px; margin:0 auto}
#top{position:relative;overflow:auto}
#top img{float:left; background:red; width:100px; height:180px}
#header{position:absolute; bottom:0; right:0}
#content{height:200px}
JS/jQuery:
$('#header').css('margin-left', $('#top img').width() + 10);
(you might want to change the + 10 for parseInt($('#top img').css('margin-right'), 10))
HTML:
<div id="container">
<div id="top">
<img src="" />
<div id="header">Some text here that should wrap to fit on row. Some text here that should wrap to fit on row. Some text here that should wrap to fit on row. Some text here that should wrap to fit on row. </div>
</div>
<div id="content">dfgdfg</div>
</div>
I'd put the header image and header div inside its own container and position the items within it using absolute positioning.
I've put together a quick sample here: http://jsfiddle.net/JjxYj/1/
Notice here that if you remove the width of the Div in the header, it will become the width of its content.
Update
To answer the updated part of the question, here's another solution that'll allow the image to be of any width whilst still positioning the header text at the bottom of its containing item: http://jsfiddle.net/JjxYj/5/
Seems to be quite different in webkit compared to ie/ff/opera.
To replicate - take an image that is like say, w: 200px h: 400px.
drop in html like this.
<div id="container">
<img id="whattheeff" src="/image.jpg" height="200" width="200" alt="render bug" />
</div>
and add css like
<style>
div#container{height:1000px;background:#fff;border:1px dashed #000;}
img#whattheeff{width:200px; height:100%;}
</style>
The result is most browsers displaying the image at it's original height 400px and webkit showing the image at the height of its parent. 1000px.
Anyone seen this before? anyone have a suggestion for getting webkit to play the same.
I solved this problem:
I set height:auto; instead of 100%.
Turns out auto ignores the declaration in the image tag and looks at the auto height of the image...the same as 100% does in most browsers except webkit.
Lessoned learned. Thanks to Cork on #jquery on freenode.
Actually firefox/ie(8) and chrome(webkit) renders image with parents height.