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;
}
Related
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 wonder if I can set div ratio responsive like an image in css.
For example, I have an image (800px x 400px) and set css is width:100%. When I use desktop screen (widht: 1400px), the image will auto resize and get full width of screen => image size (1400px x 700px).
But element, I have to set both width and height
Is there way to set empty width 800px and height 400px, and it will auto resize depends on the screen size, and it still keep ratio like an image.
Thank you
If your browser support allows you, you may use viewport units to convey aspect ratio for the div. The rest will be handled by the browser.
You may define class names for different sizes. The one that will work for 16:9 images is:
width: 100vw;
height: 77.78vw;
16 / 9 => 1.777777777777778;
In this case for 100% width of the viewport you need 77.78% height of the viewport applied to the element.
You can pre-define classes for different aspect ratios or use some simple JS to calculate this.
Codepen (same as below):
https://codepen.io/Mchaov/pen/vJrgYa
html, body {
height: 100%;
margin: 0;
padding: 0;
}
div {
margin: 0;
padding: 0;
border: 1px solid red;
}
.autoScale-16-9 {
width: 100vw;
height: 77.78vw;
}
<div class="autoScale-16-9">auto scale div</div>
How can I prevent the width of a div from expanding beyond a percent AND a pixel? In other words, the browser should calculate the pixel value of the percent, and then choose the lower of the two values.
If I were to set them both like this: {max-width:100px;max-width:20%;} the asset pipeline would simply choose the second one and ignore the first one.
width:20%;
max-width:100px;
This sets the width to 20% but caps it at 100 px.
One way to accomplish this is to simply use two divs
<div class="outer">
<div class="inner">
This content will not exceed 100px or 20% width.
</div>
</div>
<style>
.outer {
max-width: 90%;
}
.inner {
max-width: 100px;
}
</style>
This will NOT work with different image sizes/aspect ratios. You can define max-width and max-height separately, if you know the sizes of images. Use this method for a specific group of images, but not as a general rule.
Practical example: You have 5 photos from your phone to be placed in a page and you need some text to be in the other half of screen. You reduce the size of images to 500px wide and 300px high. You want them not to exceed half the screen and not be wider than 250px on tablet. Calculate the max height: 250*300/500=150px.
.img-class {
max-width: 50%;
}
#media (max-width: 800px) {
.img-class {
max-height: 150px;
}
}
Tested on latest Chrome, Firefox and IE.
You can now use css min. But you should note that IE does not support it.
width: min(20%, 100px)
https://developer.mozilla.org/en-US/docs/Web/CSS/min()
I had a specific problem which required a similar solution. I needed to display all images (independent of aspect-ratio, position or extra HTML markup) at their original size, up to a set maximum width in pixels. If the screen is smaller than this fixed size, it should shrink to fit. I.e. setting a width would not satisfy the requirements.
To expand on #Kiaurutis' answer:
img {
max-width: 400px;
}
#media (max-width: 400px) {
img {
max-width: 100%;
}
}
A working example can be seen here: https://jsfiddle.net/vrehxmpx/. In this example there is an image greater than 400px (always scaled down) and an image smaller than the threshold (only scaled down when the screen is smaller than the image).
To adjust for margins, borders and other stuff you might have on the image, just increase the #media's max-width.
Don't do this.
I believe the selected answer is correct for the scenario that the OP describes. However, some of the comments argue that the OP has asked to set the max-width property to the lower of the two values, not the width. This also can be done, please see below.
Note: This solution does not make a lot of sense to me. Please use the selected answer, it correctly demonstrates what max-width was made for. The code below will ensure that the max-width property is the lesser of 20% or 100px.
img {
max-width: 20%;
}
#media (min-width: 500px){ /* at 500 pixels, 20% of the width will be 100px */
img {
max-width: 100px;
}
}
I had the same width "page wrap" on my site. I wanted it to be 95% width by default but not more than 1280px. here is how I made it with CSS
.wrap{max-width:95%;margin:0px auto;}
#media screen and (max-device-width:1280px),screen and (max-width:1280px){.wrap{max-width:1280px;margin:0px auto;}}
Say I have a 400 px wide and 250 px high image. The user resizes the screen or loads the page on a smartphone.
Say the screen width is 320 px wide. The 400 px image won't fit.
Is there a way to automatically resize the image (and keep proportions) when the screen is not wide enough, using CSS?
In other words the image should be resized from 400px wide to 320px wide (for example).
Use
max-width: 100%;
Google responsive images for more information.
http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/
No need to use mediaqueries for this specific case: just define
#yourimage {
width: 100%;
max-width: 400px;
}
this will ensure a full-width image for every viewport width up to 400px
You need to specify both min and max:
demo: http://jsfiddle.net/abhitalks/Vv9RT/
css:
img {
min-width: 220px;
max-width: 420px;
width: 100%;
}
Try changing the panel size in the fiddle. min-height will ensure a minimum acceptable size when the screen size gets too low. max-height will ensure a maximum size so that it doesn't get huge.
100% width will keep it within bounds.
by using the css3 media queries u can do make possible
ex: #media screen (max-width:480px){
img{
width:320px;
}
}
or
img{ max-width:100%}
or else you can use both.. 'img{ max-width:100%}' place before the media quires
I need some CSS code to make my site fit the whole screen in different resolutions, however if screen goes too small, stop resizing and become scrollable. I've tried using a div covering the whole screen, and then setting width and height to 100%, with min-width set to 800px and min-height set to 600px, but its not working. Any ideas?
PS: Solution must be pure HTML/CSS, JavaScript is not possible for me now.
Try this:
http://jsfiddle.net/6CpbZ/
width: 100%;
height: 100%;
min-width: 500px;
min-height: 500px;
The concept is making the width or height or both 100% and then defining a min-width or min-height.