Responsive image blog?
- Started
- Last post
- 9 Responses
- bainbridge
What's the best way to make a simple image blog that's responsive?
Can I code it all in CSS or do I need Javascript or Jquery?
- dbloc0
It can definitely be done will all CSS, but can you do it?
- prophetone0
Simple html page with images inside divs with max-widths of XXXpx and the img tag set to which'll make all images fill the div width and scale accordingly.
img {
max-width: 100%;
height: auto;
}- ok that reads weird but is the 60 sec solution that'll workprophetone
- More like the easiest way, rather than the best way... which'll depend on other needs, which there could be a ton ofprophetone
- yeah this is all you need for responsive images.dbloc
- I just do width: 100% instead of max-widthdbloc
- either will work finedbloc
- Easy peasy...prophetone
- squatty pottydbloc
- Css naughty?prophetone
- prophetone0
or maybe just use tumblr or something similar
- instrmntl-2
wordpress too
- ETM0
Don't let your images go 100% at just any resolution. In most cases you don't want full width images going up to 1920px and higher.
If you don't have a wrapper with a max-width, then for your images:
width: 100%;
max-width: (pixel or em value of choice);A max-width of 1220px (76em) or even 1650px (103em) works well.
- Exacty. Use max-width as a restraint, width 100% as the responsiveness.prophetone
- You literally could use just this to create a responsive image blog page, it'll be dead simple but maybe that's coolprophetone
- You could. Would just need:
margin: 0 auto;
Or whatever top/bottom margin you want.ETM
- hotroddy0
use skeleton.css or you can learn flexbox
- ETM1
He should learn by hand first, IMO, if he doesn't know it.
So many newer people in the field learn boiler plates and frameworks and don't actually KNOW how to do things outside those confines.
- bainbridge0
Very helpful, thanks fellas.
- meffid0
Anyone want to knock this together and share?