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.
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 have an image tag that I managed to align nicely to the rest of the divs in one section. However, as I resize the window, the image starts shrinking or expanding. What could I do in CSS to prevent this from happening?
.img-test {
width: 33.87%;
position: absolute;
max-width: none;
}
.clothes {
background-color: #d04925;
float: right;
height: 805px;
}
The image and the div with the .clothes class are one next to the other and it should stay that way.
You can use the max-width, min-width, max-height, min-height attributes to prevent the image from resizing. Here's a link with more information. w3schools
Hello and welcome to StackOverflow!
You set your image to a percentage value, or in other words to a fraction of the parent container. So if the parent container shrinks, the fraction of it gets smaller and the image shrinks, too! Now there are ways to prevent this, you could set a min-width, which defines a minimum width for your image. So it will shrink to this width, but it won't shrink below.
.img-test {
width: 33.87%;
min-width: 300px;
}
In this example, your image would never be smaller than 300px. You could also omit the min-width Attribute, and set a fixed width directly. But since you mentioned, that you managed to make it „look nicely“, this will propably wreck your whole UI, if the viewport of the browser is too small.
So I would recommend to consider rethinking your layout, if it only works with some specific widths. One way to do this are media queries. You define breakpoints in your CSS, and if the viewport gets smaller (or bigger), different CSS rules apply. You can read more about this here and here.
Just a small off-topic addition: The default value of max-width is none and it is not inherited, so there is no reason to set it to this value.
You need height attribute to be set to some value to prevent image from resizing. Example
.img-test{
height: 200px;
position: absolute;
min-width: 300px;
width: 33.87%;
}
This will help. Unless the image is inside a div whose height is changing.
forgive me if my question is too newbie.
So I have an image, and it is not that big.
So what I want is:
If the size (width) of its container is bigger, then display the image as its original size
If the width of its container becomes smaller, like user narrow down the browser, then also automatically make the image smaller.
The reason for the point 1 is that since the image's size might be smaller than the container normally (depending on how the user adjusts the browser), I don't want the image (jpg) to be stretched to bigger and that would make the image blur.
Then I used the following css:
{
width: auto;
display: flex;
margin-left: auto;
margin-right: auto
}
The effect is not what I want:
If img's container is bigger, it is fine:
But if I narrow down the container (browser):
You can see that the image's size stays the same, but partially hidden or covered.
How can I really achieve what I want?
Set the CSS to:
width:100%
max-width:500px;
This is in case the image is originally 500px wide.
Here is a fiddle:
http://jsfiddle.net/Preben/eff76s2u/
I've built a simple example pen: http://codepen.io/rpkoller/pen/tcwFj. I have a large image going completely across the whole container width. My goal was to get a div containing a headline and text to overlay one half of the image (in the example I've covered it completely).
Problem is I've assigned an height of 100% to the overlay div which refers to the parent article element - now the overlay is slightly higher than the image.
Guess it is due to the context.
Is there an elegant way to solve and work around that issue?
I think that the following works:
img {
width:100%;
max-width: 100%;
height:auto; //!important;
vertical-align: top;
}
img is inline and has a small space below it due to line leading.
Adding vertical-align: top fixes it.
See demo at: http://codepen.io/anon/pen/rfCuz
I'm having some trouble with my web page. A picture probably descibes it best so here it is:
http://a.imageshack.us/img837/8223/skjermbilde20100902kl18.png
The text at the bottom is supposed to be inside the white area. I want the white div to change in height depending on the content. I have a div that centers the white area in the middle:
#mainContainer {
margin-left: auto;
margin-right: auto;
margin-top: 20px;
width: 800px;
min-height: 700px;
height: 100%;
}
I have also set html and body to 100%. But the problem is that the div stays at 100%, no matter how much content there is. Now a really strange thing happens when I set height to auto:
http://a.imageshack.us/img837/8295/skjermbilde20100902kl18y.png
This is how it should look (and how it does look using height: 100%):
http://a.imageshack.us/img837/7112/skjermbilde20100902kl18b.png
The full page can be found here (click on "Om oss" to see the page with the misplaced text)
I would really appreciate it if someone could figure out what the problem is! :-)
(Hopefully the CSS and HTML is easy to understand)
Edit: I just noticed that it renders properly in Safari, but not in Firefox.
You have given html and body a height of 100%. (Many child divs also have height:100%.)
What this means is that they are 100% of the size of the viewport, not the content. IOW, they are limited by the height of the browser window, and any content that stretches below this will be outside of any backgrounds applied.
Edit: To further elaborate, you have set up the background images (drop shadows) on the left and right on empty divs that you tried to stretch using height:100%, but since they do not contain anything, they can only be the height of the parent elements, which are themselves the height of the veiwport. When you set the html and body (or any other intermediate element) to height:auto, these divs (mainContainer-middle-left and -right) collapse to the size of their content, which is nothing.
You should probably reconfigure the html so these elements are parents of the actual content and get rid of all "height:100%" statements. They don't mean what you think they mean!
Stian,
For the div #mainContainer, set the height to auto.
For the div #mainContainer-middle, set the height to 550px.
That should fix your layout issues.