I've implemented the padding bottom hack by covering ALL aspect ratios ie padding-bottom: calc(~'var(--imageHeight) / var(--imageWidth) * 100%');
This works great on desktop and on most images on mobile. The images though won't always be filling 100% of the container. So i have a situation where the say X amount of padding is added to the container but on mobile, the portrait image is scaling down within the container causing a space above/below. See image
Does anyone have any advice on how to overcome this?
Related
I am having little trouble making the background image responsive. It works fine in the desktop.
body {
background:url(../Images/mountain.jpg) no-repeat;
background-size:cover;
}
This is fine when I don't care for responsiveness, perfectly fit to the window. But,
as I make window smaller the width is maintained perfect but the height of image is shrinking and I get awkward white background.
Then to solve that I added this,
height:100vh;
This was nice, my image height was perfectly aligned to window as I made smaller. Though image is also perfectly aligned for desktop and mobile, I am losing the image as I make window smaller. It is being cropped.
What should I do? Is media queries the only solution? What can I do except media queries with different images?
You can use the background-size property. Its accepted values are:
contain : Scales the image as large as possible within its container without cropping or stretching the image
cover : Scales the image as large as possible to fill the container, stretching the image if necessary
Of course it cannot stretch outside of the container (for example if the body element does not take the entire page, you might wanna add min-height: 100vh; for that)
I've designed an image grid using bootstrap using images that are either 360px square, or 360px high by 720px wide. For some reason, the wide images display taller in the row. Any idea why this is happening and how to fix it?
Here is the code in bootply
Thanks!
The images won't display at the same height just because they're the same physical height because they are scaling with your layout. And the padding in each column and elements in the columns reduces the horizontal space available for the images, and when the horizontal size changes, the vertical size will change, too (to scale the image properly).
Look at how the left/wide image is only in a single column, but the 2 images on the right are in 2 columns. There is more padding in the 2 images on the right than on the left (twice as much padding, since there are twice as many images). That's scaling the height of each to be shorter than the image on the left.
I removed the padding from the .col-* classes and .thumbnail to show that if you remove those, the images line up.
http://www.bootply.com/KacXrRCbYH
You would fix this any number of ways, but I think that needs to be up to you as to what's going to work best for your layout. The easiest way is probably just to change the height of the image on the left to account for that padding. 720x341 seems to be the resolution that works there.
http://www.bootply.com/T4F3fdgNyf
I'm working on this page and I'm having a issue with the DIV where sliders are. This div#home-slider has a height: 350px as you may notice and it works fine for large resolutions but since the page is responsive, when I resize the window or see the page from a tablet or smartphone a white row appears just below the sliders and it's caused by the height value since it doesn't change. Can any give me a solution for change the height or tell me if there is a CSS solution or hack for this? What would yours do in this case?
Have you tried to change the height to 100%?
I would remove the height declaration.
Site in progress: http://www.modernfuture.net/wordpress
I've been banging my head against the wall over this for hours - when I resize my browsers width (by dragging the browser window's right resize handle) my site maintains that nice responsive centered effect I want for roughly 1/8th of my browsers window size. However when I drag the browser's right window resize handle from right to left past this point (roughly 1/8th the width of the browser window, when the browser window is taking up the full width of my 1080p screen) my site (header, content, and footer) stops staying centered and the resize handle crops over the site rather than maintaining the responsive centering that I'm looking to achieve.
I've tried applying the "margin: o auto;" trick to the body class and the wrapper class individually and simultaneously, but it doesn't yield the desired results.
I'm really at a loss for ideas here. Can anyone offer some insight please? Thanks!
You need to remove the width from body class and margin also need to set margin:0px;
I'm having some issues with fluid images when using a max height. I'm trying to bound the image in a box that is at most 450x450 or any arbitrary box thats not in the same aspect ratio as the image. What's happening is that the width of the image is being restricted to 450px but the height is not and the image is overflowing the wrapper div.
my code is:
<div class="wrapper">
<div class="container">
<img src="http://i.imgur.com/iw4yOa0.jpg"/>
</div>
</div>
see http://jsfiddle.net/5fuZ5/ for full code and css.
I know I could achieve this by using jquery but I need a responsive solution that doesn't require javascript.
OK i've got a similar issue and could find nothing to help. My situation is that i have a single column of images that are fluid (fit their container 100% in width) works fine for landscape images but portrait are huge as its the width being fitted, therefore tall and skinny image (portrait) is having its width fit to container thus making it massively tall.
My solution was to think about the container, if in the instance of a portrait image i set the container to be 50% of the landscape container then when i fit the images width (when portrait) to a smaller container i get them proportional (ish).
So wat you want is 2 containers to use, one for portrait and landscape, the landscape one will be the maximum width you want so 450px. Now make your portrait container half a width so 225px (half of the width) if all your images are the same aspect ratio then they should all match nicely and give you a structured grid - or if single column the portrait images will be more or less as tall as the landscape images are wide.
If you want to see this working (for a short time) I'll leave this link up so you can see how i solved it. The example is an email (please don't moan about poor coding, its not finished) template I'm making, where i have a single column of images (its responsive) both portrait and landscape - use a class on the table that contains the portrait image (class=portrait) but this could easily be a div.
http://www.sink140.com/sf-test/single.html
My main point is to stop thinking about trying to control the height, just control the container, let the image fill it, and by adjusting the width of the container (making it smaller) you naturally reduce the height of the image.
Aspect ratio of the images in general will ensure you can predict the layout as you have a baseline of sorts - portrait images relate to the landscape ones.
Hope this helps or at least give you another idea.