以较小的屏幕分辨率放置大图像而不调整大小

Question

我想放置一个1500px宽的图像，我希望这个图像的全尺寸以较小的屏幕分辨率显示，如1024x768px。我不想使用max-width：100％，因为这会调整图像大小，这正是我不想要的。我想要显示其原始分辨率并“隐藏”图像的其余部分。而且图像不能成为背景。

像这样：

谢谢

编辑：这是一个例子。我正在使用Bootsrap 3.在较小的分辨率下，它会破坏页面。我希望它是全宽度而不调整大小。图像来自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 is a paragraph.</p>
            <img src="https://farm9.staticflickr.com/8083/8354311074_f961d5c489_h.jpg">
        </div>
    </div>
    <!-- End row -->
</div>
<!-- End container -->

这是代码http://jsfiddle.net/a8T7J/1/

Answer 1

您可以使用媒体查询来定位特定的屏幕分辨率

@media only screen and (min-device-width : 1024px) and (max-device-width : 1366px) {/* Styles */}