我有一个奇怪的问题.在我的页面上,我有一个行星在一些重型星云的主要图像.我设置它所以最小宽度是1000px,最大是1500px.我的侧面逐渐消失,这对于更大的屏幕看起来很棒.我想尝试做的是当你在移动设备上查看它并且它切割宽度为1000像素时,我希望图像宽1300像素,居中并切割150像素在每一侧都让你看不到淡出,但是仍然可以放大是窗口的宽度变得更大,就像一个大的iMac一样,一旦你通过那个1300像素的宽度就会再次变得可见.
我最初的想法是在两边做一些带有负边距的东西,但是在保持最大和混合宽度的同时我无法使用它.
这是来自页面的特定代码段,虽然html和css就在那里供所有人查看,但您可以使用精细命令找到任何进一步查找的div ID.
<div style="position:relative;width:100%;"> <div id="help" style=" position:relative; z-index:1; height:100%; min-width: 1000px; max-width: 1500px; margin: 0 auto; "> <img src="http://i.stack.imgur.com/tFshX.jpg" border="0" style="width:100%;"> </div> </div>
对此有任何想法,它非常接近我喜欢的方式,只需要一个小小的调整.
解决方法
CSS的视口单元
vw,vh
1vw =视口宽度的1%
1vh =视口高度的1%
这样,您就不必编写许多不同的媒体查询或javascript.请注意新人.
如果你喜欢JS
window.innerWidth;window.innerHeight;