bootstrap 3 includes the .img-responsive class
which applies these css settings
display: block;
height: auto;
max-width: 100%;
why is there no max-height:100%;?
I found adding this makes the pictures fit in terms of height as-well, but I'm not sure why it's being left out and not sure what the consequences are across other browsers.
Try something like this: http://bootply.com/86201.
max-height:100% only fills the height of the viewport. While height:auto fills the available space (also below the viewport when scrolling down).
So height:auto seems more consistent with the grid based on width and a vertical scrollbar.
On a screen with small width and height images can became small with max-height:100% and not useful.
Note in the case you give the parent a fixed height and using max-width: 100%; and max-height:100%; for your images will help to resize the image and keep the aspect ratio:
http://bootply.com/86203 which is possible the answer you are looking for.
Related
I googled everything and it seems that every example, every Stack Overflow answer doesn't work for me. I want to make two images the same height, I already made them the same width and I can make them the same height if I put for example img {height: 400px;} but I don't want that because the when the screen resolution is smaller or larger that can look bad.
And I saw that this can be fixed by using flex or grid but I really don't want to, I know that there is a small solution for this or a simple hack, but if everything else failed I guess I have to.
This is the CSS and HTML code:
.container {
padding: 20px;
margin: 20px;
overflow: auto;
text-align: center;
}
img {
padding:3px;
width: 49%;
object-fit:cover;
box-sizing: border-box;
}
<div class="container">
<img src="https://www.w3schools.com/css/rock600x400.jpg"/>
<img src="https://www.w3schools.com/css/paris.jpg"/>
</div>
EDIT: (added the links that I tried)
Two divs side by side - Fluid display
Two images, side by side responsive
Two image on the same row and with the same height CSS
How can I make all images of different height and width the same via CSS?
CSS - Divs with same height, but different image heights
Making responsive images with different aspect ratios the same height
+ more.
some of them use flex others table others they set the height to a constant, that's not what I'm looking for.
THANKS
try using 'em' or 'rem.' Those adjust depending on the size of the window.
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.
I am trying to display images with variable heights in divs. The width is fixed at 318px but height can vary depending whether we have a square photo (width = height) or rectangle photos (width < height). I am using the max-height property and it works fine on Firefox and Edge. But on Chrome, the photos heights default to max-height. The CSS is quite simple. I would like to know if there is a way to fix that issue on Chrome so that I get the same display on the three browsers. Thanks.
img{
max-height:656px !important;
width:318px !important;
}
Or you could place the image inside a fixed size wrapper and give the image the following rules: max-width: 100%; height: auto; display: block; to make the image fully responsive at any resolution.
Check this FIDDLE
This is like a mobile phone prototype where I have fixed height of 50px for header-div and footer-div.
I want the content-div to dynamically adjust its height according to the main-container (which here is acting as mobile screen size). Adjust in such a way that the content overflow should be scrollable in the visible content-div height only.
If I put header-div and footer-div height both 10% and content-div height 80%. So that it arranges according to the screen size. Trouble here is that the header and footer heights will vary according to screen sizes and as a result will make header-div and footer-div bigger/smaller in height.
This is why I have set a certain height for header-div and footer-div both that is 50px. Now I want the content-div to be adjusted in such a way that it dynamically changes its height in accordance to the main-container (parent div)
Appreciate any help. Thanks.
I tried this and I am not sure if you would like it that way but here's what I've got for you...
Change your CSS code for main-container to this.
.main-container {
width: 420px;
height: auto;
background-color: #f7f7f7;
}
change your css code for main-container
.main-container {
width: 420px;
height: 1.2em; //change as per your requirements
background-color: #f7f7f7;
}
Web Style Sheets
CSS tips & tricks
I want to make my image fit into a div without using any javascript and without letting the image stretch. I am unable to use the background-image property as I am using css transitions. Using
max-height:100%;
max-width:100%;
Works and is exactly what I want to do except for the scenario when the image is too small. I have considered enlarging the image to a certain height while maintaining the width and then applying max-height and max-width but this seems like a very hacky, time expensive solution if it even works at all. Are there any other suggestions?
Thanks
Kabeer
Display the image as block and it will fit to the parent container
wrap the image in a container and set this style for the image in it:
img {
display: block;
max-width: 100%;
max-height: 100%;
}
so it won't strech
here you have a fiddle
This fiddle is with smaller image than the container
You can try the following way which the image will inherit the height and width of its parent div
<div class="img-frame">
<img src="http://placekitten.com/g/200/300"/>
</div>
CSS
.img-frame{
width: 500px;
height: 500px;
overflow: hidden;
}
a img{
width : 100%;
height: auto;
}
Working Fiddle
Ok, it seems that there is no better solution so I will have to use the hacky solution I eluded to in the original question. For future people this is how I did it. lets say the container is 400px. Apply this css to the image:
height:400px; //set it to whatever the container height is
width:auto;
max-width:100%;
max-height:100%;
With this solution it will scale the image to the size of the container. It will then check the newly scaled image and set the max height to 100% which will stay at 400px. It will then set the max width to 100% which for a portrait image will do nothing if the image is landscape it will then set the width to the width of the container and it works. Also to centre the image after use:
margin:auto;
I apologise for answering my own question but I thought it would be useful for future people