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
Post a Comment