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.
Related
Below I have my code. How to use the height in %
<div class="container" >
<div class="row">
<div class="col-" id="t1"></div>
</div>
</div>
Css
body{
background-color:aquamarine;
}
#t1{
height:100%;
border:1px solid brown;
}
When I use height:100px; It works fine but when I use height:100%; It doesn't work.
How to give the height in percentage using bootstrap for each div?
You can try adding something like style="min-height: 70vh;
"vh" stands for viewport height. So, "70vh" means 70% of the viewport height.
Here are a few other ways to control the height using Bootstrap classes:
https://getbootstrap.com/docs/4.0/utilities/sizing/
You probably don't want to use vh because that is based on the viewport of the device and you look like you are wanting to base this on a parent container. height is based on the height of the parent element. When you say height:100%; you should think, "100% of what?". That would be the height of the parent.
So give the parent a height in some unit value like px or em or even vh.
Now this can get really tricky at times so reading the CSS spec is always recommended.
My web application is only required to support modern browsers (IE starting at 10). But it has to be fully responsive, so it should look good on all possible display sizes and resolutions.
It has the standard logo in the upper left corner, which is linked to the start page. I want to use an SVG logo, which should look good at any resolution. At first, I had the logo in a normal <img> tag, with height and width specified in css.
<a href="#Url.Action("Index", "Home")" id="Home">
<img id="logo" src="~/Content/images/mitoLogo.svg" />
</a>
#logo {
height: 3em;
width: 9em;
margin: 0.3em 1.5em 0.3em 0.2em;
}
Sadly, IE cannot work with that and clips the logo instead of stretching it to the given size. So I looked around and found this suggestion for placing an SVG image in a page. What I have now is
<div id="logo">
<a href="#Url.Action("Index", "Home")" id="Home">
<object height="100%" width="100%"
data="~/Content/images/mitoLogo.svg" type="image/svg+xml">
</object>
</a>
</div>
This displays the image properly in both IE and Firefox (haven't tried other browsers yet), but the link only works in IE. Neither in IE nor in Firefox does the cursor change to a clicking hand, and FF with AdBlockPlus shows a "block" suggestion on hover, possibly because this is an object tag.
Is there a way to display the SVG image correctly everywhere, while preserving its link function? I'm not limited to css, but can do radical changes to the markup, if needed, and I can also change the SVG source.
I played with your initial code a bit and got it working... it seems that you need to only set the width as a percentage and it will scale the height appropriately.
#logo {
width: 25%;
}
Try changing the percentage and adjusting the result window size in the JSFiddle Demo
I tested it in IE10 (+ IE9 in the emulator) and Chrome and it worked exactly as expected.
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
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
I want to implement a empty div with background color in it.
<html>
<head>
<style>
.dark_green {
background-color: #00D100;
width: 20px;
height: 4px;
}
</style>
</head>
<body>
<div class="dark_green"></div>
</body>
</html>
Under IE7/8/9 the height of this div is not 4px, it automatically change to 19px; Under FF and other chrome it is right.
Any suggestions?
It kind of depends on what you are trying to do. There are a few things that would work:
.dark_green {
[...]
line-height:4px;
}
or
.dark_green {
[...]
overflow:hidden;
}
Would both work.
The reason this is happening is because the text in your DIV (even if it's just whitespace) has a rendered line-height of 19px. The problem browsers are using that value instead of what you are setting as a fallback to not cut off text. Telling the browser that you want the text smaller (font-size:4px;), the line height smaller (line-height:4px;), or the text to get cut off (overflow:hidden;) should correct the issue.
The reasons I wouldn't use font-size in this context are:
It only works because the the line-height that is inherited when you
apply the new font size, so you might as well just set the correct
property.
Certain browsers have a minimum font size which is larger than 4px
(11px on FF, not sure if you can set this in IE), meaning that if
the user had a larger minimum set, your fix wouldn't work.
Add a doctype as the very first line such as <!DOCTYPE html>, to escape quirks mode. This is an important thing to do, or you'll have endless problems with IE.
Once you've done this, your original code will work in IE7 and greater just like it does in Firefox/Chrome.
I found this solution:
font-size: 4px;
add any item to the div you want to collapse, and set the display on that element to none.
if your problem div is
<div class="collapseToZero"></div>
Add something like this:
<span class="nothing"></span>
and add this style for the class
.nothing{display:none;}
and your resulting HTML will look like this
<div class="collapseToZero">
<span class="nothing"></span>
</div>
Now ie 7 will render your problem div with a height of zero instead of font size.
Another way - just to throw this into the mix: add an empty comment as the divs content. Yes its adding extra markup but it does work:
<div><!-- --></div>