I have set an image with the css set to a max-height of 220px and a height of 100%.
That should set (this) image width to 175px and height to 220px. Which works fluently in Firefox and Internet explorer but in Chrome (desktop, tablet & smartphone) it sets the height to 220px but the width(!) to 220px as well. Why is this, is this some kind of bug in Chrome or am I just missing something here.
Weird part is, that if you'll remove the height:100% part so you are only left with the max-height:220px, this problem does not occur.
See a more detailed example below
figure {
width: 100%;
max-height: 220px;
}
a {
width: 100%;
display: inline-block;
text-align: center;
}
img {
height: 100%;
max-height:220px;
}
http://jsfiddle.net/be5jT/ JS Fiddle Example
What's Going On:
If you use the inspector tool, the browsers are adding width:auto;, because no width rules are declared. I've researched a bit and I can't find any reason as to WHY, but it comes down the fact that Chrome and Firefox calculated "width:auto" differently. Firefox is calculating based on proportional, and Chrome is displaying native.
I've checked the CSS2.1 Width spec, and since we are talking about an image which is inline, we have a large number of conditions to check for. The one that I think applies here is:
Otherwise, if 'width' has a computed value of 'auto', and the element
has an intrinsic width, then that intrinsic width is the used value of
'width'.
Source - http://www.w3.org/TR/CSS2/visudet.html#inline-replaced-width
If I'm reading it right, that means that Chrome is technically correct, even though Firefox's method ends up looking better.
Alternative Fix Method:
lili2311's answer will work, but then you'd have to declare the width, which means that you'd have to use images which are the same proportions. You could also remove the height:``00%, which you already know. A third method would be to give the a a height:100%, change the max-height:220px to height:220px on the figure, and then remove the max-height from the img. This lets you only declare 220px once.
Code:
figure {
width: 100%;
height: 220px;
}
a {
width: 100%;
height:100%;
display: inline-block;
text-align: center;
}
img {
height: 100%;
width:auto;
}
Working Demo:
You no need to add height, set max-height only
DEMO
img {
max-height:220px;
}
Setting max-width as well fixed the issue for me in Chrome:
img {
max-height:220px;
height: 100%;
max-width:175px;
}
Demo: http://jsfiddle.net/be5jT/2/
Related
I have a core-image component in my page that I'm sizing to fit the width of the div it is within.
<div class="content">
<core-image class="sized gray" sizing="contain"
preload fade src="Koala.jpg">
</core-image>
</div>
Sizing this with absolute dimensions is fine, eg
.sized {
width: 200px;
height: 200px;
}
However, sizing with auto or 100% height will cause it not to render,
.sized {
width: 200px;
height: auto;
}
Removing the sizing="contain" fixes this issue somewhat however I'm using it's functionality.
What am I doing wrong, or what can I do to enable dynamic height based on width?
Setting width/height to auto/percentage does not cause it not to render. It causes it to have zero size.
sizing= involves no magic behind, it simply sets the background-size property of the core-image’s host.
Once set, it forces core-image to render another template. That’s why not specifying sizing seems to solve an issue.
Custom elements have still the limited support even in modern browsers. That said, auto for width/height is working uhmmm... not always as expected (at least in my experience).
There is a possibility to set w/h to percentage value, though. To do so, one should explicitly set the size of the nesting container:
<template>
<style>
.content { width: 200px; height: 200px; }
.sized {
background-color: lightgray;
width: 100%;
height: 100%;
}
</style>
<div class="content">
<core-image class="sized gray" sizing="contain"
preload fade src="Koala.jpg">
</core-image>
</div>
</template>
Live preview: http://plnkr.co/edit/7NhNwq6IgigBmiRhI58V?p=preview
Hope it helps.
Given the following structure, I need level2 have a min-height without changing the structure. Further, I am not able to move the overflow: hidden to a different class (the example is simplified, it would affect a lot of other things). It works with px, but not with %. All other css properties can be changed.
I am aware of vh, which works exactly like it should. But I would love a solution with CSS2.
Fiddle
HTML:
<div id="level1">
<div id="level2">
<div id="heighter"></div>
</div>
</div>
body and html: height 100%
level 1: min-height 100%, overflow hidden
level 2: min-height 100%
heighter: height 200px
Edit: More informations about the overflow:hidden
I am using this for a offcanvas navigation. This is a place where I can't use max-width (right?). If I replace the overflow with the max-width, the layout gets recalculated and after that I am able to scroll the level2 on the x-axis (left and right). Same problem as here (click on Push-Menu-Left and then you are able to scroll the x-axis). What I am trying right now is preventing the x-axis scrolling and being able to use the min-height: 100% corretly.
In order to calculate min-height, div#level2 needs to refer to the height definition of its parent. In your code, div#level1 does not have a specified height. You an specify one like so:
#level1 {
height:100%;
overflow: hidden; /* This has to be here */
background-color: red;
}
WORKING EXAMPLE
EDIT:
Explicitly setting height on div#level1 (rather than setting min-height), you no longer need the overflow:hidden definition. Removing that allows the page to scroll when div#heighter expands beyond the browser's height.
(You mentioned that you need the overflow:hidden for other reasons. If possible, please edit your question to describe those reasons a bit more.)
#level1 {
height:100%;
background-color: red;
}
#level2 {
min-height: 100%;
background-color: lightseagreen;
}
#heighter {
height: 2000px;
width: 100px;
background-color: white;
border: 5px dashed black;
}
WORKING EXAMPLE
http://jsfiddle.net/b8uj75e5/3/
#level2 {
min-height: 1000px; /* Working */
min-height: 100%; /* Not working */
background-color: lightseagreen;
display: block;
position: absolute;
width: 100%;
}
IT LIVES.
I just messed around until it worked.
I am loading images of various sizes and dimensions into my website.
Chrome, Opera and Safari all stretch the image so, that it doesn't look unnaturally stretched or skewed.
Firefox keeps the width of the original image and sets the image height to 100px.
This results in 50x100, 150x100 and 2000x100 images.
On the left side you see Chrome, on the right one you see Firefox.
I want all images to be exactly 100px high.
The image class looks like this
img.image-message {
padding-bottom: 2px;
height: auto;
width: auto;
max-height: 100px;
max-width: 100%;
}
Setting only height and width doesn't change a thing:
img.image-message {
padding-bottom: 2px;
height: 100px;
width: auto;
}
View live example at metahill.com.
You can use this user to login:
Username: test_t
Password: meta_hill_t
Hm, I think I've identified the root of your problem in the CSS. It actually isn't directly a style of the <img> element, which is what made it so hard to pin down. It lies in this definition in chat.css:
#chat .chat-entry > .chat-entry-message {
display:-webkit-box;
display:-moz-box;
display:-o-box;
display:box;
padding: 3px;
word-wrap: break-word;
}
The problem you see in Firefox relates to the display: -moz-box, which, as explained by Mozilla, causes children (such as the <img> elements you're having trouble with) of the styled element to grow to fill their parent. Changing the definition to something like:
#chat .chat-entry > .chat-entry-message {
display: block;
padding: 3px;
word-wrap: break-word;
}
will fix the observed problem, though I'm not sure if all those variants of display: box were there for some other purpose. (So I can't say if this fix will affect anything else.) Anyways, hope this is what you were looking for! If not, let me know and I'll be happy to try helping further!
Set the height to 100px, not the max height. The width will follow automatically to the height unless specifically declared.
I’m trying to get an image (dynamically placed, with no restrictions on dimensions) to be as wide as its parent div, but only as long as that width isn’t wider than its own width at 100%. I’ve tried this, to no avail:
img {
width: 100%;
height: auto;
max-width: 100%;
}
Many of these images are way wider than their parent div, which is why I’d like them to resize accordingly, but when a small image pops in there and gets scaled up beyond its normal dimensions, it really looks terrible. Is there any way of doing this?
Just specify max-width: 100% alone, that should do it.
Found this post on a Google search, and it solved my issue thanks to #jwal reply, but I made one addition to his solution.
img.content.x700 {
width: auto !important; /*override the width below*/
width: 100%;
max-width: 678px;
float: left;
clear: both;
}
With the above I changed the max-width to the dimensions of the content container that my image is in. In this case it is: container width - padding - boarder = max width
This way my image won't break out of the containing div, and I can still float the image within the content div.
I've tested in IE 9, FireFox 18.0.2 and Chrome 25.0.1364.97, Safari iOS and seems to work.
Additional: I tested this on an image 1024px wide displayed at 678px (the max width), and an image 500px wide displayed at 500px (width of the image).
Setting a width of 100% is the full width of the div it's in, not the original full-sized image. There is no way to do that without JavaScript or some other scripting language that can measure the image. If you can have a fixed width or fixed height of the div (like 200px wide) then it shouldn't be too hard to give the image a range to fill. But if you put a 20x20 pixel image in a 200x300 pixel box it will still be distorted.
In line style - this works for me every time
<div class="imgWrapper">
<img src="/theImg.jpg" style="max-width: 100%">
</div>
You should set the max width and if you want you can also set some padding on one of the sides. In my case the max-width: 100% was good but the image was right next to the end of the screen.
max-width: 100%;
padding-right: 30px;
/*add more paddings if needed*/
I was also having the same problem, but I set the height value in my CSS to auto and that fixed my problem. Also, don't forget to do the display property.
#image {
height: auto;
width: auto;
max-height: 550px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
display: block;
}
I found an answer which worked for me and can be found in the following link:
Full Width Containers in Limited Width Parents
I found max-width:inherit; worked for me
I wrote this code:
div.image {
height: auto;
width: 100%;
}
div.image img {
height: inherit;
width: inherit;
}
max-width: fit-content; worked for me.
If the image is smaller than parent...
.img_100 {
width: 100%;
}
I would use the property display: table-cell
Here is the link
I am creating a website that uses a fluid layout with artificial columns. I have an image at the top with some text to the side. I want the image to have a minimum size of 550px and a maximum size of 75% of the parent div. I tried this:
.class{
width: 550px;
maxwidth: 75%;
}
but it did not work.
Try:
.class {
min-width: 550px;
width: 75%;
}
The current CSS spec supports min-width and max-width, but not all browsers do. Namely, IE6. But most all other browsers on the market work fine.
Try replacing maxwidth with max-width.
I know that is request is old, but this will perhaps help some other people having the same problem.
I had the same worry and this resolve it:
.class {
min-height: 300px;
height: auto !important;
height: 300px;
}