Here's the problem, in brief:
We have a responsive layout which scales our images depending on the screen width. For narrow / small screens we adjust to a two column layout; for wider screens or landscape tablets we can comfortably show four columns. All pretty standard.
The images are defined to be 100% of the width of containing element, and have a height of auto. This works fine in all browsers from IE7+.
The problem is that on page load the browser has no idea what height to expect the images to be. Thus there's a lot of reflow/redrawing as each image is loaded. In fact they're mostly square, but there's no way to hint to the browser the ratio of any of them. Because we serve a lot of images, this causes the page rendering to slow down. On a device with lower processing power, e.g. old iPhone, I'm guessing it gobbles up a lot of unnecessary CPU too.
A possible javascript solution would be to inject a rule into the css based on the page size; this will probably involve the entire page being redrawn though. It's not ideal.
My question is: is there an elegant solution at hinting at the aspect ratio of an image, thus allowing the page 'shape' to be more-or-less correct before image load, when using responsive (percentage-width-scaled) images.
Demonstration page here: http://www.partyark.co.uk/christmas-presents.html - try resizing the screen to see the images shrinking/growing. Min size is 145px, max 200px.
There's a pure CSS technique first described by Thierry Koblentz. It's based on a wrapper with position: relative, zero height, and padding-bottom with a percentage size. The percentages of paddings apply to the width of the containing block, so you can achieve arbitrary aspect ratios with fluid layouts. Then you can put your image inside this wrapper, absolutely positioned, with 100% width and height. Example for 4:3 aspect ratio:
.wrapper-with-intrinsic-ratio {
position: relative;
padding-bottom: 75%; /* results in 4:3 aspect ratio */
height: 0;
}
.element-to-stretch {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Related
Keeping the aspect ratio of a <div> or similar element while being responsive to the parent's size seems to be a common problem. The solution that is widely regarded across the net as being the most elegant one is this:
Maintain the aspect ratio of a div with CSS
Using a wrapper element and defining the aspect ratio via the width and padding-bottom element, both of which are relative to the parent size.
div.wrapper {
width: 30%;
padding-bottom: 30%;
}
Now, my current problem is, that I need to introduce to introduce a max-height to these wrapper elements in order to make sure, that at least two rows of them fit the screen, independent of the viewport size. Adding max-height to the example above limits the element's height, but leaves the width unchanged.
However, an aspect ratio of 1:1 still needs to be maintained, even if the height is restricted via max-height. Also, I would like to have the group of wrapper elements (three or four columns, two rows) in the center of the viewport/parent.
Is there any pure html/css way to achieve this (without javascript)? I would not mind using <img> elements with a source of the desired ratio as I have to apply (background) images to these elements anyway but a universal, elegant solution as for the problem above would be appreciated.
You just have to use below code :
div.wrapper{
height:auto;
width:30%;
}
Then Problem is Solved
I am designing an HTML5 card game that will run as a mobile app, and need the #table div to scale to fill but not overflow the offsetParent div while maintaining the table's correct aspect ratio of 68%. This means that it should adjust its size to fill but not overflow either parent width and parent height so that it works in both portrait and landscape.
An example is how background-size: contain works when setting the background image. Only I'm not trying to set the background image, I'm trying to set the size of a child div. This way I can use percentage values for all subsequent elements on the table and have the game look exactly the same with exactly the same aspect ratio at all sizes.
Thanks!
UPDATE 1
Here is my code. See how the table is chopped off on the bottom for wide and short screen sizes:
http://vedanamedia.com/clients/intuitive-eye/speakeasy/
UPDATE 2
I am going for something just like this (jsfiddle.net/webtiki/dAebS) or this (dabblet.com/gist/2590942) except it also respects the shrinking height of the container.
You could try removing the default height, and adding padding bottom to create the correct aspect ratio and ensure it remains the same when re-sized.
I'm not completely sure I understand what you mean by 68% as you don't have a code pen setup, but I've added below an example for something which is an aspect ratio of 2:1 to see if this might be a possible fix for you.
div {
padding-bottom: 50%;
height: 0;
}
I am using simple css code for Profile Image Styling, but Image is stretched. How can i fix it?
Take a look at the Profile Images in this Picture:
Right Now I am Using this Code:
.Comment_Image_Size {
height: 32px;
width: 28px;
}
I also used this Code but in this case some Images are Bigger and some are smaller in height:
.Comment_Image_Size {
width: 28px;
}
Don't fix the image dimensions, I think the project you are working on should be dynamic, if it's yes, than you can also resize the images via server side, if you don't want to do that, and want to stick with HTML and CSS, than use a wrapping element, say div, float it to the left, assign some fix height & width and assign a class, and than use the below snippet to
div.class_name img {
max-width: 100%;
max-height: 100%;
}
This way, your image will resize proportionally and it won't be stretched anymore
Demo (I've attached both examples, you can check out in the demo)
In the above demo, the first one is which I've suggested to you, other is one which you are probably doing, which is stretched, so go for max-height and max-width properties.
best solutoin to give max-width and max-height to your class
.Comment_Image_Size {
max-width:28px;
max-height:32px;
}
The issue is that the original images are not the same aspect ratio. You need to specify the right height and width for each image to ensure that the maximum width/height is not exceeded (one will be less if not the right aspect ratio).
You may need to resize the images upon upload to have thumbnails that are the right size while preserving the aspect ratio How to resize images proportionally / keeping the aspect ratio?
I develop a mobile version of the site. In accordance with the principles of responsive design block size is a percentage.
html, body{
width: 100%;
height: 100%
}
What or when the input box has focus virtual keyboard appears. Since the decreased height of the screen, the size of the other units also decreased (as indicated in percentage of body). How can I avoid this? How can I avoid this? Ie block height must be calculated from the height of the device screen. Thank you.
Is there a spesific reason for having height: 100%? You only need the layout to adapt responsively to the width of the screen while height could very well be height:auto;
I am trying to create a completely fluid layout in CSS (everything in %), which would work seamlessly across platforms (desktop/mobile/tablets like iPad).
With Fluid Layouts, can an image be made completely fluid? For example:
img { max-width:100%; }
Does this mean it will adjust/fit to any extent or window size?
Also can this be applied to background images as well ?
Does this property have any limitations in terms of browser implementation or anything ?
The snippet you provide says that the maximum width for the image is 100%. This could mean no wider than the browser window or device viewport. It could also mean no wider than a relatively postitioned parent node. But, if the window is big enough, the image will render at it's native size.
It can't be applied to background images, because the background image itself is tiled or positioned based on it's original size. The max-width trick is mostly useful for content images, not so much layout or styling images.
It is limited, in that IE6 doesn't support it at all. However, that market is rather small and shrinking, so maybe you can ignore that issue.
Your code means the size of the image relative to it's parent's width. So lets say the div that the image is in is 500px wide, then the image may be a maximum of 500px wide, or smaller, not larger. for more info on max-width: W3.org max-width
For backgrounds this works a little different, you can use background-size: x y; for this. It's CSS3 and is not supported by older browsers. for more info on background-size: W3.org background-size