- This topic is empty.
-
AuthorPosts
-
August 15, 2015 at 4:50 am #206565
tomascrespo
ParticipantI want to place a full width image (somethink like a header or slider) but I want to show only the center of the image, UNLESS the viewport would be so big than the image had to be enlarged.
Some detailed examples:
My image is 2000x200px
* In a screen of 1600px width I want to show the central 1600px of my image, no resize.
* In a screen of 450px I want to show the central 1600px of my image, but shrink (resized-down)
* In a screen of 1900px I want to show the central 1900px of my image, no resize.
* In a screen of 2500px I want to show the full width 2000px of my image, of course, enlarged.What I have so far:
- Make a responsive image is quite easy
#header-img { width: 100%; height: auto; }
But it always shows the full image. There are a left and a right chunk I don’t want to show unless the resolution of the client screen would be really big.
- On the other hand, get the “overflow” behaviour could be done setting the image as background of a div, and setting his background-size property to cover, but it’s not responsive.
<div style="background-image: url(header.jpg); background-size: cover; background-position: center; height: 200px" />
I need the two behaviours. Perhaps I need media-queries, but I’m trying to avoid it. I don’t want any javascript code neither, only CSS.
I have seen this behaviour in some pages, but I can’t find any at the moment.
A picture speaks a thousand words
Observe that numbers 7 and 8 are only showed in ultra wide screen
August 15, 2015 at 5:44 am #206566Beverleyh
ParticipantI’m currently on mobile so excuse the lack of code examples…
Re: your background-size:cover; height:200px; problem…
Instead of setting an explicit height, try padding-bottom set as a percentage. This will give the div relative height that will scale with a changing (responsive) container width.
The calculation for the paddings-bottom % value;
image height in pixels / image width in pixels x 100
You’ll still probably need to use a few media queries to tweak the size/behaviour at critical breakpoints (when the image looks iffy) but it will give you something else to add to your RWD arsenal :)
BTW, have you heard of using stacked media queries to server smaller background-images to mobile and bigger ones to desktop? It can help with page weight at small screen sizes. Plus you can manipulate the breakpoints to resize heavily compressed/optimised images down to double-pixel density for retina screens. Crispy sharp and lightweight – mmmmm, my fave! The padding-bottom, stacked MQ and retina image techniques are all briefly covered here http://www.dynamicdrive.com/forums/entry.php?315-RWD-Cross-Fade-Slideshow-with-Retina-Images – ignore the slideshow, but the other stuff seems quite fitting to your needs.
August 16, 2015 at 7:10 am #206606tomascrespo
ParticipantThe padding-bottom: % solution is not bad, but it’s not enough. I will try with some media-queries.
However the link you gave me is quite interesting. I think I will go with that.
Lot of thanks
August 19, 2015 at 4:19 am #206737kwerty
ParticipantHi,
This is just a demo, in case this is what you are looking for. Set the parameters according to your needs.
http://codepen.io/anon/pen/EjzqEd
Thanks.
April 20, 2016 at 1:40 am #240759July 26, 2016 at 1:20 am #243885drupopuppis
Participant@kwerty Fast and effective, many thanks.
July 26, 2016 at 5:36 pm #243918josh
Participant@helmuc, I just want to second the use of padding-bottom and a percentage as suggested by @Beverleyh. It’s the best way to handle responsive images.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.