html - Place a large image in smaller screen resolutions without resizing -

html - Place a large image in smaller screen resolutions without resizing -

i want place image 1500px wide , want image have total size displayed in smaller screen resolutions, 1024x768px. don't want utilize max-width: 100% because resize image , that's don't want. want instead show native resolution , "hide" rest of image. , image cannot background.

like this:

thank you

edit: here's example. i'm using bootsrap 3. in smaller resolutions breaks page. want full-width without resizing it. image flickr. http://jsfiddle.net/a8t7j/1/embedded/result/

<section> <div class="container"> <div class="row"> <div class="col-md-12"> <h1>hello world</h1> <p>this paragraph.</p> <img src="https://farm9.staticflickr.com/8083/8354311074_f961d5c489_h.jpg"> </div> </div> <!-- end row --> </div> <!-- end container -->

this code http://jsfiddle.net/a8t7j/1/

you utilize media queries target specific screen resolutions

@media screen , (min-device-width : 1024px) , (max-device-width : 1366px) {/* styles */}

html css image width