I really thought this would be elsewhere on stack overflow, but I searched fruitlessly for length of time. Forgive me if I missed it.
I have a set of images who need to be made as large as possible (width: 100% to container elem) as long as the container does not grow too wide or the image too tall because of the container width. Aspect ratio needs to be preserved.
I thought I could do this with
img { width: 100%; height: auto; max-width: 500px; max-height: 250px; }
The idea was that if the image hit either the max-width or the max-height given the width and the aspect ratio, it would no longer grow. In reality, this causes the image width to size as wide as possible, but breaks the aspect ratio (squishing the image to max-height) when it is too tall, instead of preventing the image from growing wider.
Is there a better way to go about this? I would like to avoid javascript if possible. My tests are in Firefox 9.
A bit old but using top or bottom padding will keep your aspect ratio. Divide height/width and apply that percentage to the padding top or bottom. It can get tricky sometimes but it works.
Here is a good article about it:
http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios
You can use media queries to create a stairstep of fixed image sizes, and then go like this:
#media screen and (min-width: 701px) and (max-width: 900px) {
img {
width: 800px;
height: auto;
}
}
#media screen and (min-width: 901px) and (max-width: 1100px) {
img {
width: 1000px;
height: auto;
}
}
Not very pretty, but it works.
Related
It does possible to adjust the width of a div as the width property of the browser is decreasing or increasing using pure Css?
I mean, if I have an element like this in a resolution:
div {
width: 20%;
}
Then, I want to increase 1% the width of the div for every 10px that I decrease the width browser, it's possible using just Css3?
Decreasing width as window is descreased is easy with CSS. Increasing width as window is decreasing is not.
Its possible to use a css only solution, but it will require a wild amount of #media queries:
JS Fiddle (using larger percentage for example)
#media only screen and (max-width: 400px) {
div {
width: 20%;
}
}
#media only screen and (max-width: 390px) {
div {
width: 21%;
}
}
#media only screen and (max-width: 380px) {
div {
width: 22%;
}
}
etc...
CSS doesn't have the logic built in to calculate the width of a viewport AND apply styles based on it without manually doing it with a media query. A js solution would definitely be recommended.
This also may help you a combination of the following code and use of calc() in CSS could help.
vw, vh
1vw = 1% of viewport width
1vh = 1% of viewport height
Let give it a try with your code.
I don't know if the title is quite correct, but what I want basically is to create a div element that stays proportional to the resolution of the screen. For example, if the width is 1900px I want that the div have:
width: 1115px;
height: 775px;
But if the width of the page is 1050px I want:
width: 620px;
height: 430px;
What should be my CSS to allow this?
So I want that the width is a percentage of the screen, let's say, and the height is based on the width.
There are two solutions to make the element proportional to the screen, one which depends on your setup.
You can use percentage
width: 20%;
But this only defines a percentage of the parent element, and does not make both your width and height proportional
You can also use viewport units. This defines a percentage of the viewport. If you use viewport width vw you can get a height which is dependent on the width.
height: 10vw; /*10% of viewport width*/
width: 10vw;
You do have to be aware that this is relatively new, so do not forget to check "known issues" on caniuse.com
You can also setup media queries to handle smaller or bigger screens.
#media (max-width: 300px) {/*10% of 300px is very small, so we change it to 90%*/
.selector {
width: 90vw;
}
}
Here is the solution, simply you should calculate the desired aspect ratio, i.e. width/height:
Maintain the aspect ratio of a div with CSS
You can use CSS media queries, like this:
.selector {
width: 1115px;
heigth: 775px;
}
#media (max-width: 1050px) {
.selector {
width: 620px;
height: 430px;
}
}
I'm currently working on a project where we use a slider with images. This slider is displayed with width 100%, and currently we're adjusting the height to make the slider responsive, in case the user resizes the browser window or visits the website using their phone.
However, the website is for an artist who obviously does not want the image to be altered in any way, especially not altering with the aspect ratio. So what we're looking into is having height: auto to adjust the image height correctly according to the width: 100%, without altering the image (aspect ratio) itself.
This does not work like intended however, using the following code:
#media (min-width:1600px) {
#header{
height:auto;
width: 100%;
min-height: 630px;
background-size: 100% auto;
}
#slidershadow {
height: 630px;
}
}
We need to have some min-height, otherwise we cannot display the slider controls correctly. Here is a picture of our current situation (first image) and the expected behaviour (second picture).
Is there a way to resize our slider responsive, but keeping the following in mind:
The aspect ratio of the image cannot be altered;
We cannot crop images too much (only slightly);
There is a minimum height to keep in mind;
If it helps, all images in the slider have the same size.
You have to give a max-width:100% to your img.
Plus background-size only works when you are working with background-images.
Since you are applying max-width to your img there is no need to apply max-width to its parent #header
Last, but not least try not use min-height and height:auto at same time in the same selector.
Below is a working snippet according to the above comments:
img {
max-width: 100%;
height: auto
}
#media (min-width: 1280px) {
#header {
min-height: 500px;
}
}
#media (min-width: 1600px) {
#header {
min-height: 630px;
}
}
<div id="header">
<img src="http://placehold.it/1920x630" />
</div>
I had my main div set with
max-width:600px;
However, when the content is not long enough that div will resize to the length of the content. Which makes sense.
So Instead I declared:
width:600px;
max-width:600px;
But now the div won't resize down when you resizing the window. I tried setting the min-width:
min-width:200px;
width:600px;
max-width:600px;
But it still won't resize down passed 600px (on window resize);
So what am I missing? Can I use all 3 width settings together? (min-width,width,max-width)?
If so, how? I am trying to understand the logic.
I want the content to stretch up to 600px, but also resize down on windows resize.
I think you want
width: 600px;
max-width: 100%;
This way, the element will attempt to have a width of 600px. But if the parent isn't wide enough, it will be less.
Demo
Just take out the "width: 600px" The div will be 600 px if the browser window is large enough, otherwise it will adjust down to your min width if the browser window is smaller than 600px.
You could use media queries to apply a width for certain screen sizes
.div {
width: 600px;
}
#media screen and (max-width 600px) {
.div {
width: 100%;
}
}
I have a website with all content centered. The content has a width of 500px.
I'm only concerned about the content (the 500px) to be visible, how much of the gutter doesn't matter.
For desktop displays I have the following CSS rules:
margin: 0 auto;
width: 500px;
What should be applied so that the content area gets displayed in it's entirety on as many screen sizes as possible (i.e. as small as 320px)?
to support different screen sizes you should use percentage, not pixel. But in case you are more comfortable using fixed width (using pixel) you can use media queries to achieve that.
.container { //start with the smallest screen width
width: 300px;
margin: 0 auto;
}
#media screen and (min-width: 40em) { // 640px
.container {
width: 500px;
}
}
But I do recommend you to use percentage instead of pixel. Hope you find this useful.