将浏览器窗口缩放到给定的浏览器窗口宽度时，裁剪图像.然后让图像的其余部分响应

本文介绍了将浏览器窗口缩放到给定的浏览器窗口宽度时，裁剪图像.然后让图像的其余部分响应的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在使用下面的代码尝试以下操作:

I am using the code below to attempt the following:

随着浏览器窗口的缩小，图像被裁剪直到 浏览器窗口的宽度缩小到800px或更小.

在浏览器窗口宽度等于或小于800像素时，图像应变为 反应灵敏.含义:照片中剩下的那部分 (在通过缩放浏览器窗口进行裁剪后)应该缩放 以及浏览器窗口.

As the browser-window is scaled down, the image is cropped till the browser-window is scaled down to width 800px or less.

At Browser-window width 800 px or less, the image should become responsive. Meaning: that part of the photo that's left remaining (after being cropped by scaling the browser-window) should scale along with the browser-window.

但是它不起作用.目前，使用下面的代码时，图像确实会裁剪，并且当浏览器窗口宽度达到或小于800px时，图像确实会响应，但只能通过加载完整且未裁剪的图像来做到.我希望照片的裁切部分变得灵敏.

But it's not working. At the moment, while using the code below, the image does crop, and when browser-window width 800px or less is reached the image does become responsive, but only by loading back the complete and uncropped image to do so. I want the cropped portion of photo to become responsive.

任何人都可以帮忙吗?也是> 此处是JSFIDDLE .

Can anyone help please? Also a JSFIDDLE HERE.

#apple-box { width: 80%; overflow: hidden; } @media screen and (max-width: 800px) { #big-apple { width: 100vw; }

<div id="apple-box"> <img id="big-apple" src="www.stedentripidee.nl/wp-content/uploads/2015/10/stedentrip-new-york.png"> </div>

推荐答案

这是您要实现的目标吗? JSfiddle

is this what you want to achieve? JSfiddle

#apple-box { width: 90%; overflow: hidden; background-image: url(www.stedentripidee.nl/wp-content/uploads/2015/10/stedentrip-new-york.png); background-size: cover; background-position: center; height: 400px; } @media only screen and (max-width: 800px) { #apple-box:after { content: ''; display:block; padding: 28.5%; } #apple-box{ height: auto; } }