I am trying to display images with variable heights in divs. The width is fixed at 318px but height can vary depending whether we have a square photo (width = height) or rectangle photos (width < height). I am using the max-height property and it works fine on Firefox and Edge. But on Chrome, the photos heights default to max-height. The CSS is quite simple. I would like to know if there is a way to fix that issue on Chrome so that I get the same display on the three browsers. Thanks.
img{
max-height:656px !important;
width:318px !important;
}
Or you could place the image inside a fixed size wrapper and give the image the following rules: max-width: 100%; height: auto; display: block; to make the image fully responsive at any resolution.
Related
I've read a lot of SO posts on resizing video to fit the browser and/or parent element, but none of them do what I need. I have a single-page app with overflow: hidden so the app doesn't scroll.
The app has various display:flex containers, and in one of those I want to have a 16x9 video.
I want the whole video to always fit into its container (so there will be bars on top/bottom if the container is too wide, and bars on left/right if the container is too tall). I can use width: 100% on the video to make it resize based on container width, but I can't figure out any way to make it shrink to fit when the container height gets smaller. (I'm guessing that's because most web pages grow vertically, so restricting based on height is less important.)
I've figured out that, at least on Chrome, the video tag does not allow height to be a percentage, and the W3C spec agrees with that, unfortunately. I've tried the trick with a relative-positioned video-wrapper with padding-bottom: 56.25% and then putting the absolute-positioned video into that, but it still cuts off the bottom of the video when the container is too wide.
Here's a jsfiddle; it's easier to see there than to write about it: https://jsfiddle.net/darkstarsys/q1fr9jwd/2/
In there you'll see the video reacts correctly to its container's width, but the bottom of the video is cut off when the height is small. Play with the main element's height and width to see how it reacts to its container size.
I'd like to avoid a Javascript-based solution if possible; seems like CSS ought to be able to do this somehow.
I'm not sure if this is what you want, but try it:
.main {
/*overflow: hidden;*/
/* TRY ASPECT RATIOS HERE
800w x 300h doesn't work -- bottom gets cut off */
width: 800px;
height: 300px;
background: red;
}
.video-wrapper {
display: flex;
height: 100%;
}
.video {
width: 100%;
height: auto; /* spec says no percent allowed here */
}
I'm trying to learn how to make crossbrowser pages and stuck at dealing with IE9: it creates some space near the <img>, see example
Look at the rightmost image, it should appear here.
If space doesnt appear, hover the mouse over the image.
Can't imagine what's wrong, this image is only floated to left...
UPDATE: wow, seems like i've found out whats going on: IE9 makes image's height fit the height of container, but somehow make actual width equal to image's original width. But still keeps aspect ratio of image.
New question: how to force IE9 to make img fit into container with keeping aspect ratio and without magic
Changing this:
.header * {
float: left;
height: 100%;
}
To this:
.header * {
float: left;
height: inherit;
}
Fixes it as 100% is treated as auto in this scenario. Auto in this case is the size of the original image: not the size of the container. From there, IE believes it also has that width, and because the container resizes width-ways and not length-ways, the 'padding' is shown.
Inherit, on the other hand, resizes the image to fit the container, maintaining the aspect ratio the original image had.
I want to make my image fit into a div without using any javascript and without letting the image stretch. I am unable to use the background-image property as I am using css transitions. Using
max-height:100%;
max-width:100%;
Works and is exactly what I want to do except for the scenario when the image is too small. I have considered enlarging the image to a certain height while maintaining the width and then applying max-height and max-width but this seems like a very hacky, time expensive solution if it even works at all. Are there any other suggestions?
Thanks
Kabeer
Display the image as block and it will fit to the parent container
wrap the image in a container and set this style for the image in it:
img {
display: block;
max-width: 100%;
max-height: 100%;
}
so it won't strech
here you have a fiddle
This fiddle is with smaller image than the container
You can try the following way which the image will inherit the height and width of its parent div
<div class="img-frame">
<img src="http://placekitten.com/g/200/300"/>
</div>
CSS
.img-frame{
width: 500px;
height: 500px;
overflow: hidden;
}
a img{
width : 100%;
height: auto;
}
Working Fiddle
Ok, it seems that there is no better solution so I will have to use the hacky solution I eluded to in the original question. For future people this is how I did it. lets say the container is 400px. Apply this css to the image:
height:400px; //set it to whatever the container height is
width:auto;
max-width:100%;
max-height:100%;
With this solution it will scale the image to the size of the container. It will then check the newly scaled image and set the max height to 100% which will stay at 400px. It will then set the max width to 100% which for a portrait image will do nothing if the image is landscape it will then set the width to the width of the container and it works. Also to centre the image after use:
margin:auto;
I apologise for answering my own question but I thought it would be useful for future people
bootstrap 3 includes the .img-responsive class
which applies these css settings
display: block;
height: auto;
max-width: 100%;
why is there no max-height:100%;?
I found adding this makes the pictures fit in terms of height as-well, but I'm not sure why it's being left out and not sure what the consequences are across other browsers.
Try something like this: http://bootply.com/86201.
max-height:100% only fills the height of the viewport. While height:auto fills the available space (also below the viewport when scrolling down).
So height:auto seems more consistent with the grid based on width and a vertical scrollbar.
On a screen with small width and height images can became small with max-height:100% and not useful.
Note in the case you give the parent a fixed height and using max-width: 100%; and max-height:100%; for your images will help to resize the image and keep the aspect ratio:
http://bootply.com/86203 which is possible the answer you are looking for.
I'm trying to build a horizontal scrolling image gallery, which has a fixed height (e.g. 200px) and a bunch of images (aspect ratio mantained, shrunk to fit 200px height) placed side-by-side in the gallery. If the images exceed the browser width, a horizontal scrollbar for the gallery is provided.
I'm having a problem with getting it to work on Firefox. In Firefox, the div that contains the image will act as if its child image wasn't shrunk, and thus leave lots of white space between images. The gallery works as expected in Chrome and Safari.
I've made a jsfiddle to try and replicate the problem in as little lines as possible - observe it in Firefox vs. another browser.
.container {
height: 200px; /* Want a fixed height for container. */
white-space: nowrap; /* Want elements to display side-by-side, for horizontal scrolling. */
overflow: auto; /* Want scrollbars on .container. */
}
.container > .element {
display: inline-block;
height: 100%;
}
.element > img {
height: 100%;
}
Am I doing something wrong? Is there any way to get .element to shrink to fit its scaled-down image content?
Note that aside from the image, I'd like a text overlay over the image (not reflected in jsfiddle), which is why I've chosen to enclose the image in a .element div (so that I can give it position: relative and then add an absolutely positioned child overlay to it), and chosen to give it a display of inline-block (so that I can align the child overlay to the bottom of .element).
You're seeing https://bugzilla.mozilla.org/show_bug.cgi?id=829958
The good news is that this is fixed in Firefox 25. The bad news is Firefox 25 is not shipping until October 28.
As a workaround for now, giving .container > .element a fixed height instead of a percentage height would work... Or alternately give .container a parent that has the overflow style. The key part to work around that bug is to have the fixed height on something that has visible overflow.