html - Scale image with page that's larger than the page in CSS -

html - Scale image with page that's larger than the page in CSS -

i have image want resize when width of page/screen changes.

this code want:

.section { position:relative; min-width:600px; max-width:1200px; height:auto; margin-left:auto; margin-right:auto; overflow: hidden; } .image { position:relative; display:inline-block; vertical-align:top; width:100%; height:auto; } <div class="section"> <img src="long_img.jpg" class="image"/> </div>

the problem is, image 2560px wide, , section 1200px. image gets squashed horizontally fit, scales height down. but, when page @ it's max width(1200) want image @ total height(400). need image hang on edge, still automatically resize.

the reason don't crop image because want scroll css animation.

i've tried .image{ margin-right:-1360; } had no effect.

use media query after css have there. remove 100% declaration , allow image it's natural size.

@media(min-width:1200px) { .section img { width: auto; display: block; } }

also, take away overflow:hidden containing div.

see fiddle example.

html css layout scaling