So I searched up how to make a video responsive in html with css but it doesn't work. please help
this is my HTML
<div class="container">
<video width="540px" height="320px" controls src="Videos/Video.mp4"></video>
</div>
and this is css
.container {
width: 100%;
}
video {
height: auto !important;
width: 100% !important;
}
I would erase the width and height attributes from the video tag and (if the video isn't larger than specified by those attribute values) introduce a max-width setting in the CSS rule:
<div class="container">
<video controls src="Videos/Video.mp4"></video>
</div>
.container {
width: 100%;
}
video {
height: auto;
width: 100%;
max-width: 540px;
}
This will make the video either 540px wide if the container is >= than 540px, and make it full width when the container is less than 540px wide. Height will be auto according to the proportions in both cases.
In any case, if your video is larger than specified, you should use the original size width as the value for the max-width in the CSS. That way the CSS will allow a size up to original size (but not larger, which would cause bad quality)
Related
I have a responsive img tag:
<img width='800' height='600' srcset='img-400px.jpg 400w, img-700px.jpg 700w, img-1000px.jpg 1000w' sizes='(max-width: 1024px) 100vw, (max-width: 1840px) 63vw, 1200px' src='img.jpg'>
And CSS rules:
object-fit: contain;
width: auto;
margin: auto;
height: auto;
max-height: 900px;
max-width: 100%;
Even though the original image width is 800px and I have the rule max-width: 100% the browser renders the image wider than 800px. If I remove width: auto, the rendered size is correct (max 800px). Why does width: auto change the behaviour?
I figured to understand what is the issue.
The browser does not override the max-width setting. When I use img with sizes attribute together with css rule width: auto, the browser uses sizes to allocate space for the image. This space can be wider than the image's real width. When I remove width: auto rule, the browser takes the width information from img's width attribute and the image can't exceed its intrinsic dimension. So the solution was to remove width: auto rule.
I have a simple website / html-page that should show one image and some buttons. But the image size should follow the following rules:
the shorter side of the images should not be shown as more than 600 pixel
the image height should be max 80% of the window to allow space for UI without need to scroll
the image width should be up to 100% of the window
the image should not be shown in an increased size
the image's aspect ratio should not change
Regarding the rule with the shorter size: With shorter size, I mean either the height or the width of the image in pixel, depending which is smaller in number. So if an image is 2000x1200 it should be shown in 1000x600, so that the shorter size is 600. But also an image with 1200x88888 would be shown to 600x44444 pixel.
Here is what I tried. I resized all the images, so that their shorter size is 600 pixel or shorter. But the images are still diverse, an image could be 3000x600 but also 100x3000 or 100x100.
And in the code I tried:
<div style="max-height: 80%">
<img style="margin: 0px auto; display: block; height: 100%;" src="http://www.dummyimage.com/800x200/000/fff&text=image">
</div>
but this does not work for me, as the image is increased in size if the 80% window height is larger than the image.
Here a fiddle with 30%, instead of 80% to make it better visible:http://jsfiddle.net/ErNeT/2723/
It is probably impossible to determine if an image is portrait or landscape without JavaScript (to determine shorter side). So:
$(window).on("load", function() {
$("img").each(function() {
if (this.naturalWidth >= this.naturalHeight) {
$(this).addClass("landscape");
} else {
$(this).addClass("portrait");
}
});
});
body {
margin: 0;
}
.demo {
position: relative;
height: 100vh;
background-color: peachpuff;
}
.demo:nth-of-type(even) {
background-color: papayawhip;
}
.demo::before {
position: absolute;
content: attr(title);
}
/* style used on page load */
img {
max-width: 100vw;
max-height: 80vh;
}
/* classes added by JavaScript */
img.landscape {
max-width: 100vw;
max-height: 600px;
}
img.portrait {
max-width: 600px;
max-height: 80vh;
}
/* 600px is greater than 80vh for screen shorter then 750px so... */
#media screen and (max-height: 750px) {
img.landscape {
max-height: 80vh;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="demo" title="Shorter side test (landscape)">
<img src="http://www.dummyimage.com/1000x700/ccc/000"></div>
<div class="demo" title="Shorter side test (portrait)">
<img src="http://www.dummyimage.com/700x1000/ccc/000"></div>
<div class="demo" title="Viewport width and height test">
<img src="http://www.dummyimage.com/2400x2400/ccc/000"></div>
<div class="demo" title="No stretch test">
<img src="http://www.dummyimage.com/200x200/ccc/000"></div>
take look here https://www.w3schools.com/howto/howto_css_image_responsive.asp for a responsive image with just css or use an picture meta tag, in that way you can see this too https://css-tricks.com/responsive-images-css/
<picture>
<source srcset="extralarge.jpg" media="(min-width: 1000px)">
<source srcset="large.jpg" media="(min-width: 800px)">
<img srcset="medium.jpg" alt="…">
</picture>
I wonder if I can set div ratio responsive like an image in css.
For example, I have an image (800px x 400px) and set css is width:100%. When I use desktop screen (widht: 1400px), the image will auto resize and get full width of screen => image size (1400px x 700px).
But element, I have to set both width and height
Is there way to set empty width 800px and height 400px, and it will auto resize depends on the screen size, and it still keep ratio like an image.
Thank you
If your browser support allows you, you may use viewport units to convey aspect ratio for the div. The rest will be handled by the browser.
You may define class names for different sizes. The one that will work for 16:9 images is:
width: 100vw;
height: 77.78vw;
16 / 9 => 1.777777777777778;
In this case for 100% width of the viewport you need 77.78% height of the viewport applied to the element.
You can pre-define classes for different aspect ratios or use some simple JS to calculate this.
Codepen (same as below):
https://codepen.io/Mchaov/pen/vJrgYa
html, body {
height: 100%;
margin: 0;
padding: 0;
}
div {
margin: 0;
padding: 0;
border: 1px solid red;
}
.autoScale-16-9 {
width: 100vw;
height: 77.78vw;
}
<div class="autoScale-16-9">auto scale div</div>
I have an image that's 1920 pixel wide. I want it to display centered and cropped in the browser window when it's width is greater than 1024 pixels. When the browser width is less than 1024, the image should be centered and cropped to 1024 pixels and then resized to the browser width.
I can't figure out how to do this, and haven't found any solutions on the internet yet.
Can anyone tell me how to do this, or point me at examples?
I am not exactly sure what are you trying to do, BUT I think what are you looking for is:
max-width
http://www.w3schools.com/cssref/pr_dim_max-width.asp
You can use object-fit property:
.image-wrapper {
width: 100%;
height: 100%;
overflow: hidden;
> img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
}
}
HTML
<div class="image-wrapper">
<img src="" />
</div>
What you are looking for can be achieved using media queries. Following is just an example. Hope you can proceed with that.
#media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Here background color will be changed when you resize the browser and browser width is less than 480px.
I'm making a few HTML pages specifically for iPad Air and iPad Mini. The pages will have few larges images, for example of the size of 1600x300. But as per the code which was written by me the images are too big to be on the screen, it goes beyond the screen while testing in Windows browsers. Code as shown below:
<div class="wrapper">
<div class="image1"></div>
<div class="image2"></div>
</div>
.wrapper {
width: 100%;
height: 100%
}
.image1 {
width: 1600px;
height: 300px;
top: 100px;
left: 100px
}
.image2 {
width: 1700px;
height: 300px;
top: 450px;
left: 100px
}
The width and height of div are set the same as width and height of the image. The images size were specifically designed for iPad, I can't change the size.
If I give the actual resolution of iPad for .wrapper as shown below the images will get positioned correctly when I test I the browser setting the screen size to 1024x768 (logical resolution of iPad).
.wrapper {
width: 2048px;
height: 1536px
}
I want the image to adapt to all screen as well as iPad by giving 100% width and height to wrapper class so that even in the portrait mode of iPad I can view it without any fluctuations. Please tell me how to achieve this.
Thanks
OP hasn't clarified why they're using DIVs. Maybe there's going to be content laid over it? Until OP provides clarification I'm going to provide the standard responsive image solution.
If you don't have to use DIVs, try this:
<img src="http://placehold.it/1600x300">
<img src="http://placehold.it/1600x300">
img {
display: block;
max-width: 100%;
}
jsFiddle: http://jsfiddle.net/rwzn2db6/
UPDATE
Note: I cannot tell if you're also looking for a 100% height option or just need the widths to be a 100% width and scale.
If you'd like to use DIVs you could use background-size: cover along with the appropriate amount of padding-bottom for each image DIV. The padding on the bottom of the DIV is based on the image's height to width ratio expressed as a percentage.
<div class="container">
<div class="img-1"></div>
<div class="img-2"></div>
</div>
.container > div {
background-size: contain;
}
.img-1 {
background: url('http://placehold.it/1600x300/') no-repeat;
padding-bottom: 18.75%; /* 300/1600 * 100 = 18.75 */
}
.img-2 {
background: url('http://placehold.it/1600x300') no-repeat;
padding-bottom: 25%; /* 400/1600 * 100 = 25 */
}
jsFiddle: http://jsfiddle.net/5kjtdhmn/
Either of the solutions offered above may not be a 100% what you're looking for as it is hard to tell what the proper context and final objective is.
Add max-width: 100% and height:auto to your images
May be you need to adjust size (width-height) of pages according to the device, so you might need the following tag added to your section of your HTML.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
......
......
content="width=device-width" will adjust screen resolution automatically'initial-scale' value used to set zoom level of page.
First of all, what's with people saying stuff isn't an answer? Expecially when it is? Wtf.
Second of all, another acceptable answer on top of what was already said by DigitalDouble, would be to set the image to have the
Background-size:cover; and set the image with css background-image property.
I would remove the pixel sizes entierly and just set it to 100% width and height, with position Absolute to be able to lay other content on top of it.