I want a section of my site (banner) to be an image that fit all width and for the image to maintain the full width (not the px width, but in percentage) at all times. I don't care about the height being too low, I need the image to always show all the width content and the height to be auto.
I'm using background-size: contain and this keeps the full width of the image but the height needs to be calculated, because then the container height will be higher than the image's. I've tried using viewport units but it's not consistent between different resolutions (maybe I'm doing it wrong but the value for a higher resolution doesn't work for a lower one).
How would I make this responsive?
The markup:
<body>
<section class="feat-bottom">
<h4>some title</h4>
</section>
</body>
I'm using CSS for this image because, as we all (should) know, design images don't belong in the markup. So the image has to fit all the width, what would be the difference between 100% and 100vw? The first one is the parent's width, body has all the width in the screen and the second is the (again?) the device's width?
Will this approach be compatible with tablets and phones? Should I use a second image optimized for these cases?
To calculate the height of the element I'm using a formula that calculates the height while maintaining the aspect ratio:
New height = New width / (Original width / Original height)
So translating this into css gives:
section.feat-bottom {
height: calc(100vw / (1920px / 800px))
}
This approach offers a fluid scaling, so no break points needed.
Related
I'm creating a website with a flexible layout. I have a background video, and I want to set it so that it has either 100% width OR 100% height. I only want the width OR the height to be used in any given situation, and I want the browser to choose whichever of the two dimensions would make the video the largest. I can't use min-height and min-width, because the video is significantly larger than the size of the screen, so I have to set an actual width and actual height, but I want the browser to switch between using width or height depending on the aspect ratio of the screen.
Does anyone know how this could be done? Ideally the solution would only use CSS and HTML, but if this can only be done with JavaScript, I'm open to any suggestions! Thanks in advance!
Adding a meta tag with viewport as it's name and then setting position attribute in css might do it what you needed.
Combining min-width/height with viewport width/height:
CSS:
#backgroundVideo{
min-height : 100vw; /* the height will always be at least as great as the viewport width */
min-width : 100vh; /* the width will always be at least as great as the viewport height */
}
I have a set of images for which I am specifying explicit width and height attributes in the HTML, so that space is reserved for them while the page is loaded (this avoids page "jumps" when images take longer to load).
On the other hand I don't ever want the images to take more space than the available width of the viewport. So if the viewport is too narrow the images should resize. For this I added the following CSS styles:
img.resizable {
max-width: 100%;
height: auto;
}
The problem: As soon as I set height:auto in the CSS, space for the image is not reserved anymore during page loads and I get the page "jumps" effect. If I remove height:auto, then if the image resizes the aspect ratio will not be preserved. Any suggestions on how to approach this?
A non-Javascript solution would be preferred if possible.
I solved this with hints from this blog post that explains how to use CSS to set the aspect ratio of a fluid element.
Basically the solution looks as follows:
<div style="width: [width]px; max-width:100%; position:relative">
<div style="padding-top: [aspect]%"></div>
<img style="position:absolute; top:0" src="...">
</div>
where: [width] = image width, [aspect] = 100 * image width / image height
Basically with this the browser has the following information:
The initial width of the image (set in the outer div via width)
The aspect ratio (set in the inner div via padding-top)
The resizing behaviour (set in the outer div via max-width)
With this I achieve the desired behaviour: No page jumps upon initial load, and automatic resizing (keeping the aspect ratio) for narrow viewports.
I've got an image whose height is set as 100%. This makes the image display correctly as I would expect so long as there's plenty of width. However, when the screen's width is reduced eventually the image loses it's ratio because the width is squished while the height still remains 100%. I would like to have the image always stretch to the maximum size possible within the container without losing it's ratio. In other words, it the width is the limiting factor, the image should use 100% width and maintain ratio, but if the height is the limiting factor, than the image should use 100% height while maintaining its ratio, and it should be able to switch between these. Is there a way to do this purely in CSS? Thanks!
This should keep the correct ratio (providing you don’t need the height to be set to 100% for some reason).
img{
width: 100%;
height: auto;
}
--EDIT--
If you want to retain a consistent height of the parent element then you can either:
Hide the overflowing image using overflow: hidden;. Although this
means you will lose some of the image at larger sizes. See
example.
Use max-width and max-height to stop the image growing at a
certain point. This means you will potentially be left with some
white space in the design. See example.
I am currently making a single page scrolling vertical site which has the viewport locked at 100% height.
The problem I have is that the designs that were given to me were calculated for a 1200x800 (macbook 13") view but I am using 1920x1080 (macmini) resolution.
Furthermore, the usable height area in each screen is limited by each widget that the browser uses so the 800 might actually be for example 638 height (it is more profound in the ipads where 768 browser height in total is not 768 at all). Also, the design must be centered in width and height. For width, I can use margin:0 auto, but height is trickier because it would need to make a div absolute.
What I did so far was to make a div absolute and have it manipulated by javascript, but I would like to know if there is a pure css way to do it since javascript would require much cases and excess code.
this is what i'm using with body height and html height at 100%
<div style=" display:table;width:100%;height:100%">
<div style="display:table-cell;vertical-align:middle;">
</div>
</div>
I want to load some photos from a server and display each of them in an own box such that the box is filled and the image centered (not stretched), if it is to big. Can I achieve this for example with CSS without knowing the size of each image? Maybe with max-width or so?
Here is an example of what I want:
You could use the CSS3 background-size property.
Specifically, you would use either background-size:contain or background-size:cover.
From the spec:
Values have the following meanings:
‘contain’
Scale the image, while preserving its intrinsic aspect ratio
(if any), to the largest size such that both its width and its height
can fit inside the background positioning area.
‘cover’
Scale the image, while preserving its intrinsic aspect ratio
(if any), to the smallest size such that both its width and its height
can completely cover the background positioning area.
Source: http://www.w3.org/TR/css3-background/#the-background-size
Which one you used would depend on the aspect ratio of the original images you are using.
Scroll down on this resource to see some examples: http://www.css3.info/preview/background-size/
The quickest thing that you can do is to put the image as a background image that is centered:
style="background: url(images/42.png) 50% 50% no-repeat"
Images smaller than the box will be centered in the box. Images that are larger will experience cropping.
The downside is, there is no scaling.
For scaling, you would have to know the dimensions, employ some math to calculate a scaling amount that will preserve the aspect ratio and use an actual element that is inside a cropping container that uses "overflow: hidden".
Here what you do. If for instance the image is inside a DIV with an ID called "boxer" You'll now create a CSS that will automatically re-size every image that's inside the DIV with the ID "boxer" The CSS will look like this
#boxer img {
Width: 600px
Height: 600px;
}
The above CSS will automatically re-size whatever image you put inside to the specifications in the CSS. This will fit the box with the ID "boxer" precisely if the dimensions corresponds to that of the CSS. You could just do 100% for both the width and the height, that way it fits the box.