I have a video element set to 100% width in a container div. That div has a max-width of 800px and min-width of 400px. When resizing the browser I need the video element to resize while retaining its original aspect ratio. Currently it resizes in width but remains its original height, adding letterbox bars above and below to make up for it.
Is it possible to resize the video element dynamically like this without resorting to Javascript?
According to the box model, in the section on replaced elements, this should work as you expect: Since the video has a height of auto and a set width, and it has an intrinstic ratio (as videos do), then the used value of height should be computed based on those. Make sure you are not specifying the height anywhere — the following CSS worked for me:
video {
width: 100%;
}
div {
max-width: 800px;
min-width: 400px;
}
Try explicitly adding height: auto to the video — maybe with !important to see if it’s getting set somewhere else.
Related
So I've been trying to create a simple page where the image takes up 100% of the height, with a small sidebar. I want the image to resize itself when I resize the window. When I resize the window vertically, the width stays the same, which is not what I want (I want it to retain it's aspect ratio whatever the window size). I really dislike this distortion, but am unsure of how to fix it. Any idea what I'm doing wrong?
.big-image {
max-height: 100%;
min-width: 20%;
margin: auto;
overflow: hidden;
}
set display: block or display: inline-block to your .big-image class, in order for the max-height and min-width property to work. These properties, along with height, width, min-height, max-width, padding-top, padding-bottom, margin-top and margin-bottom doesn't work on inline elements.
You can set either the height or width of an image to auto and control the other property with a set size whether that be percentage or px. That auto should maintain the aspect ratio of the image while you get to control the size of the image with the other property.
max-width:100% and height:auto will work. When applying max-width:1000%; it will take the width of the container and height will be proportionately varied.
How do I set the height of a div container for example that should be 60% of the screen height?
Setting the 60% as the height in css works fine if the browser window is not resized. But if I shrink the browser window, the div shrinks accordingly.
https://zurb.com provides a nice example. The "Mission Accomplished", grey part is always the same height, no matter how the browser window is being resized. How can this be ensured?
I don't want to use px to ensure HiDpi support.
Thanks,
That's a simple fixed-height element; it has nothing to do with screen size.
You should just use px and not worry about anything; px means logical pixels and will work with arbitrary DPIs.
While the page in question simply used a fixed height (px) for the element in question, meaning that it will always have the same height (and won't be 60% of the height regardless of viewport height). In order to have an element be relative to the viewport, you're looking for viewport-sized typography.
To adjust based on height, you're looking for the CSS unit vh, which tells the element in question to scale based on the viewport height. You can also use vw to scale based on the viewport width.
Keep in mind that <body> has a default of margin: 8px, so if you want to avoid scrollbars when using viewport-sized typography, you'll also need to override this back to 0.
body {
margin: 0;
}
div {
height: 60vh;
width: 100vw;
background: red;
}
<div></div>
For more in-depth information on CSS units, I'd recommend checking out this guide.
Hope this helps! :)
I have a set of logos of variable size. I've set them all up at the same height of 50px with a width of auto:
.img-logo {
width: auto;
height: 50px;
}
This works fine until the window is resized. When the window is resized, wider logos flow outside of their container.
I would like the logos to shrink to fit their container width. I have tried to achieve this with max-width:
.img-logo {
max-width: 100%;
width: auto;
height: 50px;
}
This works but the aspect ratio is compromised due to the height property remaining 50px.
Any ideas?
With a fixed height and variable width either of the below can happen.
The img gets stretched to accommodate the variable width and skew the aspect ratio.
The img gets cropped (overflow:hidden) by the parent but the aspect ration is kept intact.
So you can make the img responsive too. But then it wont have the constant height, while keeping the aspect ratio intact.
I think it's impossible to keep its size when the window is too small and you didn't want to change ths size of image. Why not try #media,which can provide different css styles in different conditions.
I have an image something like below.
<img src="file.jpg" />
Below is the css code
img {
max-width: 100%;
height: auto;
}
Can anyone explain me on how does this css code make the images responsive, I mean scale it perfectly. I want to know the working behind this css code.
When your parent width is smaller than width of image, image width will take 100% of parent width.
If parent width is bigger than image width, image width will stay original.
Same with max-height. Also min-width/min-height will ensure that width/height will not be smaller than specified.
height: auto; will preserve aspect ratio for image. If you set both max-height and max-width or set height to specific size than image will be stretched
When you apply max-width:100%; to any element then that perticular element could have maximum 100% width of its parent, thus it can give you gaurantee that child will never go out of parent's bounds.
Thus if parent has suffitient width then child is shown in it's original size, otherwise it's width is matched to the parent. Thus it make our layout responsive.
Here is example : http://jsfiddle.net/xxn2hfuL/
I'm trying to show the original size of the image. Often that's bigger than the width of the div that's containing it.
In modern browsers, it gets automatically resized to fit the parent div. Even when I use overflow: auto the image still gets resized.
So how can I prevent the image from getting resized when the outer div has a set width?
Thank you!
Bootstrap have maximum width set to 100% on images. Change it:
img {
max-width: none;
}
I used this one img {min-width:100%}