我有一个CSS问题。我有一张1024x500像素的图片。现在的问题是,每当浏览器窗口/视口的宽度更改为低于图像宽度(1024px)时,图像就会开始被剪切。现在,正如你所看到的,当视口大小低于1024px时,我将容器宽度设置为100%,并且它确实按比例调整了大小,但随着浏览器调整大小(更小),图像的侧面会越来越多地被剪切。
有人能帮我让我的图像逐像素动态调整大小吗?
查看我的网页并调整浏览器窗口的大小以了解我的意思。注意图像的侧面被剪掉。。。
HTML:注意我的原始图像是1024x500
<div class="ei-slider">
<ul class="ei-slider-large">
<li>
<img src="http://lamininbeauty.co.za/images/large/makeup.jpg" alt="Vertical Sunbed TanCan"/>
</li>
</ul>
</div>
CSS:
大屏幕的普通CSS
.ei-slider{
position: relative;
width: 1024px;
height: 500px;
margin: 0 auto;
}
.ei-slider-large{
height: 100%;
width: 100%;
position:relative;
overflow: hidden;
}
.ei-slider-large li{
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
height: 100%;
width: 100%;
}
.ei-slider-large li img{
width: 100%;
}
当浏览器窗口低于图像宽度时:1024px:
@media screen and (max-width : 1023px){
.ei-slider{
width: 100%;
}
}
当我的图像被切断时,对于较小的屏幕:注意我的原始图像是1024x500
@media screen and (max-width: 930px) and (min-width : 831px){
.ei-slider{
width: 100%;
}
.ei-slider-thumbs li a{
font-size: 11px;
}
.ei-slider-large li{
position: absolute;
top: 0px;
left: 0px;
overflow: visible;
height: 100%;
width: 100%;
}
.ei-slider-large li img{ /*HERE IS MY PROBLEM*/
width: 930px;
height: 454px;
}
}
谢谢!
您使用:
max-width: 100%;
height: auto;
width: auto; /* for ie9 */
这将使您指定的css动态调整大小,以适应基于max-width:100%语句的容器。如果您想要不同的方式,请相应地更改最大宽度语句。
我有一个简单的解决方案。只需根据视图端口百分比给出宽度参数。
语法:
width: <Percentage>vw;
示例:
<img src="Resources/Head.png" alt="" style="width: 100vw; height: 85px">
这里,图像的高度是固定的,但宽度将被调整为视图端口的100%,无论其大小如何。
希望这有帮助:)
我遇到了同样的问题,因为我使用的是相同的jquery插件(即滑块)。我发现该图像是从Javascript代码中传递的附加(内联)样式,事实上它只是向左移动,而不是实际剪切。该代码将动态值传递给标签,这些值是在特定视口宽度中重新加载时从图像本身获得的。作者在.js文件中使用了这个。
var $img = $(this);
imgDim = _self._getImageDim( $img.attr('src')); //gets the dimensions from the image
然后,他给图像留了一个空白,就像一样
$img.css({marginLeft: imgDim.left}); //assigns a new margin-left, overrides any value set for this property in the .css file because it's inline
当视口宽度变小时,这始终是一个负值。解决方法是设置
$img.css({marginLeft: 0});
之后,它对我来说很好,没有因为更改而产生任何问题。祝你好运