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.
Related
I have a div container which contains an img with height of 311px.
The parent container follows the height of that image, but I want my container to have a height of 532px.
I have set the image CSS to width: 100%; height: 100%; object-fit: cover; so that the image, even small, will still fill the container without any distortion, but I need to make the container to be responsive even when the screen gets smaller, and I've set the height to 532px so when the screen gets smaller, the height of div remains the same.
Is there any way to set a "default" height to div container, but adjusts when screen gets smaller?
here is the code html:
<style>
.inside-img{
object-fit: cover;
width: 100%;
height: 100%;
}
.container{
height: 532px;
}
</style>
<div class="container"><img class="inside-img" src="img.jpg"></div>
thanks in advance.
You should use min-height:300px; this sets the minimum height for your container and can be adjusted
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 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;
}
I want to make an image stay at a certain height, but I also want it to stay at the width of the user's screen.
Here's the image's CSS:
#cafe {
max-width: 100%;
height: 700px;
}
Here's the output:
you can try this
#cafe {
width: 100%;
height: 100vh;
}
here the 'vh' means VIEWPORT HEIGHT which automatically takes the user's screen height.
img {
width: 100%;
height: auto;
}
The code above resizes the images width with the with of the page, while keeping the same ratio with the height.
Why doesn't
img {
width: auto;
height: 100%;
}
resize the image's height with the pages height, while keeping the same ratio with the width? Is there another way I can have that effect on my image?
May be height is not defined of parent of img. So please put any height to the parent of img then try.