Is there a pure css way to make images fit in a row across a container with variable size?
I have a row of images I want to fit.
There are 2 ways I know of to fit images in a row. If I set the image width as a percent ie, width: 20%, then if the screen is wide then the images becomes very large or if the display is small the images becomes very small. If I set the images as absolute width ie, width: 100px;, then the images are shown with the size I want it to. But the container isn't totally filled and there's unseemly left over space at the right.
Right now I'm using javascript to adjust the percentage width based on the user screen width.
Is there a pure css method of controlling the way that images are shown, such that if the screen is wide more images fit into a row rather than blowing them up but still ensuring that all the images fit snuggly into the container with no left over space.
you can add float property to each of your image container (float: left). see http://css.maxdesign.com.au/floatutorial/tutorial0407.htm
I'm using media queries like this:
#media all and (max-width: 900px) and (min-width: 600px)
img
width 50%
#media all and (max-width: 1050px) and (min-width: 900px)
img
width 33.3333%
#media all and (max-width: 1280px) and (min-width: 1050px)
img
width 25%
#media all and (max-width: 1910px) and (min-width: 1600px)
img
width 16.6667%
I think there's a better answer.
Related
Please look at this website http://www.grupottc.com/ scroll down until the section that says "VALOR AÑADIDO" when you resize the whindow you'll see that the blank parts from the sides are shrinking with the window, how to make that effect, thak you.
Look at the media queries. A website must implement some media queries to match specific max-width or min-width in order to fit the screen size. You may search for some of these queries in the website such as those below, which are only applied as long as the screen width is not more than 767px.
#media (max-width: 767px)
.elementor-column {
width: 100%;
}
#media (max-width: 767px)
.elementor-96 .elementor-element.elementor-element-8g5lbx9 .elementor-icon-box-icon {
margin-bottom: 16px;
}
I am using bootstrap and have a responsive page width-wise, but am also trying to make it vertically responsive. This page will ultimately end up as a sort of widget, so that the user can resize it into any sort of width and height combination. Generally what I've seen researching online have been responsive-width related, or if they talk about height media queries it is only for a portion of all the elements that constitute the page.
I find that having breakpoints in bootstrap helps, but almost wish there was a 12-row grid system as well for vertical breakpoints. Not all layouts will look good when constrained for height, especially when what I am trying to do won't have any vertical scrollbars either.
It also feels redundant to target height media queries in conjunction with certain widths when I already have (min-width & max-width) media queries. Because if I just made (min-height & max-height) media queries then it would crop content that was too wide.
Starting from a 16:9 aspect ratio and 1920x1080px resolution, I have broken it up into 12 breakpoints. 3, 6, 9 ratio heights and 4, 8, 12, 16 ratio widths.
#media (min-width: 480px) and (min-height: 360px){}
#media (min-width: 480px) and (min-height: 720px){}
#media (min-width: 480px) and (min-height: 1080px){}
#media (min-width: 960px) and (min-height: 360px){}
#media (min-width: 960px) and (min-height: 720px){}
#media (min-width: 960px) and (min-height: 1080px){}
#media (min-width: 1440px) and (min-height: 360px){}
#media (min-width: 1440px) and (min-height: 720px){}
#media (min-width: 1440px) and (min-height: 1080px){}
#media (min-width: 1920px) and (min-height: 360px){}
#media (min-width: 1920px) and (min-height: 720px){}
#media (min-width: 1920px) and (min-height: 1080px){}
Basically I'm asking if there is a better or easier way of doing this. Because currently it seems like I'm having to use a lot of custom breakpoints, and that I'll be inserting a lot of styles in each query to adjust the layouts for each screen size.
Scaling according to the viewport height.
So to answer the first part of your question, CSS3 offers the units vw (view width) and vh (view height). The VW and VH units measure the width and height of the viewport. For an example, 30vh is the equivalent of 30 percent of the height of the viewport. There's also vmin and vmax, where vmin is equal to the smaller and vmax is equal to the larger of the two.
For an example, if you wanted to make a div element fill up the entire viewport,
div {
width: 100vw;
height: 100vh;
}
In the past, people would have used height: 30% to make an element take up thirty percent of the height of the viewport, but the problem is that using height: 30% would only make the element take up thirty percent of its parent element. For this reason, it isn't as effective.
Simplifying the #media queries.
If you really need twelve break points in your web page to ensure it looks as it should on all devices, I'd argue that you're doing something wrong. The whole point of responsive web design is to avoid having to style your web page differently for each screen resolution and aspect ratio. Hopefully, using things like the vw and vh units will help you avoid needing to create that many separate layouts. To my knowledge, there really isn't a way to simplify those #media queries (correct me if I'm wrong).
You can also set #media queries for height:
#media screen and ( max-height: 600px ){
background: blue;
}
see this question for reference.
All my images should be responsive so i defined image width 100%. But most of the pictures are getting too big on a bigger screen than the iPhone.
These images don't need to have full height so i want them to be stripes.
What you seem to be looking for are css media queries.
As an example:
img {width: 50%;}
#media only screen
and (max-device-width : 767px)
{
img {width: 100%;}
}
This will make your images 50% width on a desktop, but on a mobile device with a screen of 767px or less the images will be 100% width.
I'm using CSS #media to adjust my website depending on the screen resolution
Whether i switch to a resolution with the height of 768 or 720 it will still act as if i'm my screen resolution has a height of 720px
.group-container{
min-width:1210px;
max-width:70000px;
width:1210px;
margin-left:2.5%;
height:87%;
margin-top:1%;
}
#media only screen and (max-height: 768px) {
.group-container{
margin-top:150px;
}
}
#media only screen and (max-height: 720px) {
.group-container{
margin-top:3px;
height:90%;
}
}
For the first media query you should use also a min-height set to 720px and max-height set to 768px
And if you try to use (max-width: ...px) instead?
#media only screen and (max-width: 720px) {
.group-container{
margin-top:3px;
height:90%;
}
}
This way you won't rely on your height, but the width of the window it's being displayed on. example:
your resolution is 900x1600.
Resizing the height of the window wouldn't have much effect. If you where to use max-width, that way if you resize to 600x1200 for example, it would have more effect.
EDIT: The reason why I think you should use is, the height doesn't really matter when it comes to responsive design. The height might change but it will always be scrollable, so using the height will have little to no effect.
The width of the device DOES matter, the width is important when it comes to responsive design (assuming your website isn't horizontally scrollable). It would be better to create query's based on the width of the display, then to rely on height for that matter.
our site is not responsive, and one of the requirement is to render the images on mobile devices so they fit the screen and we are running into a problem, becasue different sized images are uploaded to a web page
And this is what our CSS code looks like
#media only screen and (min-width : 320px) and (max-width: 640px) {
.article-body div img:not(.logoOP){
width: 320px !important;
height: 214px !important;
}
}
So this works fine for 600 X 400 images, because the aspect ratio is the same. However, when we have a different size images, say 400X578, the above CSS code won't work and the images look really stretched and distorted.
What is a good solution here, since I am no front end Dev.
Any help is appreciated.
Thanks
Modify your CSS to the following:
#media only screen and (min-width : 320px) and (max-width: 640px) {
.article-body div img:not(.logoOP){
width: 320px !important;
height: auto;
}
}
This will allow you to specify the width of the image and the height will automatically adjust itself proportional to the width.