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.
Related
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)
I would like for my image to keep its normal width and height without stretching in the full screen browser. How could this be accomplished?
HTML
<!DOCTYPE html>
<img id='mountain' src='img/mountains.jpg'>
CSS
body {
margin: 0;
padding: 0;
}
#mountain{
width: 100%;
height: 600px;
}
#mountain{
width: auto;
height: auto;
}
You can add this attribute.
Try this.Hope it will work.
Good luck
#mountain{
object-fit: contain;
object-position: center;
width: 100%;
height: 600px;
max-height:600px;
}
Your issue is that you are using a combination of absolute sizing units and relative sizing units. Use either pixels OR percentages, but not both together.
If you want the image to stay the same fixed size, use absolute units such as pixels (px), or units based on font size (em or rem), for example:
#mountain{
width: 800px;
height: 600px;
}
If you want it to resize with the screen or its container, but keep the same ratio, use relative units such as percentages (%) or view port sizes (vw and vh), for example:
#mountain{
width: 80%;
height: 60%;
}
Of course, you should base these sizes on your image's aspect ratio and not some arbitrary values.
If you want the image to display with its original height and width, you can choose to not define width and height at all, which has the same effect as setting them to auto, as auto is the default value:
#mountain{
width: auto;
height: auto;
}
My CSS is designed to be mobile first, so everything is dependent on the viewport using vh and vw. For Desktop use, I would like to limit the scaling to be within 800px and center it. Is there a way to constrain the viewport to max at 800px? and how would I center it?
Following this link, you can determine the min-width and max-width of your viewport, for instance
#viewport {
min-width: 640px;
max-width: 800px;
}
For maximum browser support, you can define the min and max-width of html and body like this
html, body {
min-width: 640px;
max-width: 800px;
}
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 am showing images in a dialog with images of varying size , the minimum width image being of 500px and most of images are greater than 800px wide.
.modal-dialog { min-width:500px; }
How do I applying css properties such that if image is 500px wide orless than 800px , the width of container dialog .modal-dialog decreases to image width but remains fixed at 800px for other images of size greater than 800px.
Similarly suggest how to do this for height.
.modal_dialog img{
display: inline-block;
width: auto;
min-width: 500px;
max-width: 800px;
}
now you set the height for that images
Adding the following properties to the container .modal.dialog:
.modal_dialog {
display: inline-block;
width: auto;
min-width: 500px;
max-width: 800px;
}
max-width and max-height constrain the container to the required dimensions and setting the display to inline-block and the width to auto will adjust the container width to the image width if it is between 500px and 800px.