html - 在不调整大小的情况下将大图像放置在较小的屏幕分辨率中

Question

我想放置一张 1500 像素宽的图片，并且我希望该图片在较小的屏幕分辨率(如 1024x768 像素)下显示其完整尺寸。我不想使用 max-width: 100% 因为这会调整图像的大小而这正是我不想要的。相反，我想显示其原始分辨率并“隐藏”图像的其余部分。并且图像不能作为背景。

像这样:

谢谢

编辑:这是一个例子。我正在使用 Bootsrap 3。在较小的分辨率下它会破坏页面。我希望它是全 Angular 的而不调整它的大小。图片来自 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 */}