html - Responsive image scaling with changing max-height -


it's far simpler point example try , explain problem trying solve i'll (apologies people on mobile, won't work...)

the effect want achieve can seen on vice news (http://news.vice.com)

as can see while resizing browser, aspect ratio of image remains intact throughout sizes. jumps @ 1200px , again @ 700px, while scaling both width , height.

is there way achieve using css? head stuck on one.

thanks!

media queries, of course.

if in source code, see have 3 different versions of same image display @ each different size (to minimize scaling). then, using media queries, display proper 1 , have width fill page:

here's mobile image, example:

@media screen , (min-width: 43.75em) {     .lede .lede-images img.mobile     {         display: none;     } } 

and here's global code:

.lede .lede-images img.mobile {     width: 100%; } 

setting width 100% while not setting height automatically maintain aspect ratio while resizing.


Comments

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

c# - MSAA finds controls UI Automation doesn't -

wordpress - .htaccess: RewriteRule: bad flag delimiters -