本文介绍了将浏览器窗口缩放到给定的浏览器窗口宽度时,裁剪图像.然后让图像的其余部分响应的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
随着浏览器窗口的缩小,图像被裁剪直到
浏览器窗口的宽度缩小到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.
我正在使用下面的代码尝试以下操作:
I am using the code below to attempt the following:
但是它不起作用.目前,使用下面的代码时,图像确实会裁剪,并且当浏览器窗口宽度达到或小于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; } }更多推荐
将浏览器窗口缩放到给定的浏览器窗口宽度时,裁剪图像.然后让图像的其余部分响应
发布评论