Using the CSS3 column-width property in Firefox seems to not work as expected. When an image that is taller than it's container exists, the image does not wrap onto a new column as expected:
Example in JSFiddle
<div id="container">
<img src="http://placehold.it/300x600" alt="" />
</div>
and
#container {
border: 1px solid #000;
width: 1200px;
height: 300px;
-moz-column-width: 300px;
-webkit-column-width: 300px;
}
One would expect two columns with the top half on the left followed by the bottom half of the image. This works as expected on Chrome, however with Firefox, it seems to simply overflow. Is there an additional CSS style that needs to be applied in this case, or is this something that is broken/not implemented in Firefox?
Unfortunately this is a reported bug in Webkit's CSS renderer. Firefox and Opera behave as expected.
The only way to get Webkit to render it right, would be to set the max-height of images to the height of the container:
#container > img {
max-height: 300px;
}
Demo
Try before buy
I guess not the expected answer, but maybe still helpful.
Related
I've run into what seems like a very specific bug in IE9 layout rendering, where the height of a div with box-sizing: border-box and a min-height is calculated incorrectly when the inner content is resized.
Given the following markup and CSS:
<div class="constrained">
<div class="content">Content</div>
</div>
* { box-sizing: border-box; }
.constrained {
border: 1px solid blue;
min-height: 300px;
padding: 10px;
overflow-x: auto;
}
The div.constrained renders appropriately at 300px height (278px inner height) when the page loads. When new content is injected into div.content via JavaScript, the div.constrained container grows to 322px height, as if the box-sizing were no longer applied.
JSFiddle demonstration:
http://jsfiddle.net/eafztwb2/16/
This only occurs with overflow values of auto, visible or scroll. Setting the overflow-x to hidden, or inherit (so long as inherit doesn't end up evaluating to one of the former) does not show the problem.
This isn't a question so much as knowledge-sharing, but I'd be interested in solutions that work around this while still allowing overflow-x: auto.
This definitely does look like a layout bug, but fortunately the work-around is pretty simple. Apply a height to your element, along with the min-height. For example:
.constrained {
height: 100%;
min-height: 300px;
}
The issue exists in Internet Explorer 10 as well. This solution works for both IE 9 and 10. Internet Explorer 11 appears to have resolved this on its own - I was unable to repro the issue there.
Fiddle: http://jsfiddle.net/eafztwb2/23/
In Firefox (correctly, I believe), no red div is seen due to width: 0 but in Chrome, it is displayed as having 1px width. This seems like an issue with recent versions of Chrome. This fiddle shows the issue.
The code is:
<div id="wrapper">
<div></div>
</div>
#wrapper {
background: yellow;
height: 100px;
width: 100px;
}
#wrapper div {
display: table-cell;
height: 100px;
width: 0px;
background: red;
}
Does anyone know why this happens or a workaround?
Chrome (and other webkit-based browsers) will only allow a table cell to have zero size if it has no content, no background, and no borders. Add any one of those things, and you get the 1px minimum width and height.
In this particular case, you might be able to work around the bug by setting overflow: hidden on the container div and then shifting the table-cell div left 1px via relative positioning. Firefox ignores relative positioning on table cells, so it shouldn't be affected. Don't know about IE, etc.. The downside is that, if any content does ever get added to the table-cell div, its left edge will be cut off by 1px.
Say that i want to have a couple of divs on my page with images in the background (like this: http://www.ubudhanginggardens.com/). I know how to set the size of my divs, but the problem is that the background image stays the same if I make the web browser smaller... I want the background image to scale up/down with the web browser.
CSS
body, html {
height: 100%;
width: 100%;
margin: 0px;
}
#container1 {
float: left;
height: 100%;
width: 50%;
background-image: url(../img/1.png);
}
#container2 {
float: left;
height: 100%;
width: 50%;
background-image: url(../img/2.png);
}
This can be done with pure CSS and does not even require media queries.
To make the images flexible, simply add max-width:100% and height:auto. Image max-width:100% and height:auto works in IE7, but not in IE8 (yes, another weird IE bug). To fix this, you need to add width:auto\9 for IE8.
Source
CSS:
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
And if you want to enforce a fixed max width of the image, just place it inside a container, for example:
<div style="max-width:500px;">
<img src="..." />
</div>
jsFiddle example here. No javascript required. Works in latest versions of Chrome, Firefox and IE (which is all I've tested).
If you would like to have your image scale with your browser, set the width to a percent instead of defining it as a number of pixels.
So if you wanted the image to always cover half of a div:
<div class="my_div">
<img src="http://example.com"></img>
</div>
<style>
.my_div .image {
width:50%;
}
</style>
As you change your browser window size, the size of the image will change. You might want to take a look at Responsive CSS Frameworks, such as Twitter's Bootstrap, which can help you achieve exactly this behavior.
I want to wrap an image into an html DIV and, since I want this to be fully scalable with the size of the window, I want to set the width of the DIV in percentage as follows:
html
<div id="wrapper">
<img src="http://openclipart.org/people/netalloy/rally-car.svg" />
</div>
css
#wrapper {
position: absolute;
width: 50%;
}
#wrapper img {
width: 100%;
}
The image should determine the height of its container. This is because the image width is set to 100% and the image height is calculated accordingly maintaining the correct aspect ratio.
The result is visible on jsfiddle: http://jsfiddle.net/lorenzopolidori/5BN4g/15/
My questions are:
Why do all modern browsers render the wrapper DIV 5px taller than the inner image?
How can I get rid of this 5px gap, while still setting all the sizes in percentage and without using javascript?
Surprisingly, this happens in Chrome (21.0.1180.89), Firefox (15.0.1) and IE8, while IE7 renders it correctly, matching the height of the DIV with the height of the image.
Check this out :
http://jsfiddle.net/5BN4g/29/
It's a line-height issue :-)
You need :
#wrapper {
width: 60%;
background-color: #aaa;
margin: 50px auto;
line-height:0;
}
#wrapper img {
width:100%;
border: 1px dashed red;
box-sizing:border-box;
}
I used box-sizing to make sure the width of the image doesn't overflow the container
................
Hi now add vertical-align:top in your img tag throw css
as like this
#wrapper img {
width: 100%;
border: 1px dashed red;
vertical-align:top; // add this line
}
live demo
OK, fiddling about, I found a good possible solution:
#wrapper img {
display: block;
width: 100%;
border: 1px dashed red;
}
Changing from the default inline display to a block display eliminates the line-height problem straight away.
This approach is also semantically correct because in this case what we really want is a single image wrapped in a DIV without any other elements in it, so the concept of line-height needs to be completely wiped off by displaying the image as a block.
It works on all major browsers: http://jsfiddle.net/lorenzopolidori/5Cpf2/3/
I think you shuold set align property to force browser show correctly img tag.
<div id="wrapper">
<img align="center" src="http://openclipart.org/image/800px/svg_to_png/74557/rally-car.png" />
</div>
DEMO
I think is because it doesn't see as a Table
i added the display:table in your code
And it looks fine now, check the link
Example Display Table
Your issue is that an image -- the <img> tag, to be exact -- is an inline element. All you need to do is set display: block on the image and the extra padding goes away. Demo.
I wonder how I could make an image resize along with the browser window, here is what I have done so far (or download the whole site in a ZIP).
This works okay in Firefox, but it has problems in Chrome: the image does not always resize, it somehow depends on the size of the window when the page was loaded.
This also works okay in Safari, but sometimes the image is loaded with its minimum width/height. Maybe this is caused by the image size, I am not sure. (If it loads okay, try to refresh several times to see the bug.)
Any ideas on how could I make this more bulletproof? (If JavaScript will be needed I can live with that, too, but CSS is preferable.)
This can be done with pure CSS and does not even require media queries.
To make the images flexible, simply add max-width:100% and height:auto. Image max-width:100% and height:auto works in IE7, but not in IE8 (yes, another weird IE bug). To fix this, you need to add width:auto\9 for IE8.
source: http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
CSS:
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
And if you want to enforce a fixed max width of the image, just place it inside a container, for example:
<div style="max-width:500px;">
<img src="..." />
</div>
JSFiddle example here. No JavaScript required. Works in latest versions of Chrome, Firefox and IE (which is all I've tested).
2018 and later solution:
Using viewport-relative units should make your life way easier, given we have the image of a cat:
Now we want this cat inside our code, while respecting aspect ratios:
img {
width: 100%;
height: auto;
}
<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">
So far not really interesting, but what if we would like to change the cats width to be the maximum of 50% of the viewport?
img {
width: 100%;
height: auto;
/* Magic! */
max-width: 50vw;
}
<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">
The same image, but now restricted to a maximum width of 50vw
vw (=viewport width) means the image will be X width of the viewport, depending on the digit provided. This also works for height:
img {
width: auto;
height: 100%;
max-height: 20vh;
}
<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">
This restricts the height of the image to a maximum of 20% of the viewport.
window.onresize = function(){
var img = document.getElementById('fullsize');
img.style.width = "100%";
};
In IE onresize event gets fired on every pixel change (width or height) so there could be performance issue. Delay image resizing for few milliseconds by using javascript's window.setTimeout().
http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html
Set the resize property to both. Then you can change width and height like this:
.classname img{
resize: both;
width:50px;
height:25px;
}
Are you using jQuery?
Because I did a quickly search on the jQuery plugings and they seem to have some plugin to do this, check this one, should work:
http://plugins.jquery.com/project/jquery-afterresize
EDIT:
This is the CSS solution, I just add a style="width: 100%", and works for me at least in chrome and Safari. I dont have ie, so just test there, and let me know, here is the code:
<div id="gallery" style="width: 100%">
<img src="images/fullsize.jpg" alt="" id="fullsize" />
prev
next
</div>
Initially, I was using the following html/css:
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
<div>
<img src="..." />
</div>
Then I added class="img" to the <div> like this:
<div class="img">
<img src="..." />
</div>
And everything started to work fine.
Just use this code. What most are forgeting is to specify max-width as the max-width of the image
img {
height: auto;
width: 100%;
max-width: 300px;
}
You can use CSS3 scale property to resize image with css:
.image:hover {
-webkit-transform:scale(1.2);
transform:scale(1.2);
}
.image {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
Further Reading:
CSS3 2D Transforms
CSS3 Hover Effect Transitions, Transformations, Animations
Try
.img{
width:100vw; /* Matches to the Viewport Width */
height:auto;
max-width:100% !important;
}
Only works with display block and inline block, this has no effect on flex items as I've just spent ages trying to find out.