0

嘿伙计们，我正在使用 twitter 引导程序和这个 jquery 脚本来创建一个网站：

$('.fadein').each(function() {

var std = $(this).attr("src");
var hover = std.replace("img/flyoutcricket-noglow.jpg", "img/flyoutcricket-glow.jpg"); 
$(this).clone().insertAfter(this).attr('src', hover).removeClass('fadein').siblings().css({
    position:'absolute'
});
$(this).mouseenter(function() {
    $(this).stop().fadeTo(700, 0);
}).mouseleave(function() {
    $(this).stop().fadeTo(700, 1);
});

});

我遇到的麻烦是在调整响应式网页的大小时。在较小的窗口中，图像的大小不会保持不变。（平板电脑、手机等）有什么想法吗？

该网站是 flyoutcricket.com。谢谢您的帮助。

4

1 回答 1

1 
img {
    border: 0 none;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}

这是来自 bootstrap 的 img 的 CSS。图像的大小始终为其包含块宽度的 100%，高度保持成比例。但是当图像被绝对定位并且包含元素被静态定位时，情况就不是这样了。

因此，请更改您的 CSS，以便这些图像的包含元素不是静态定位的：

.chapter1 {
    border: 30px;
    display: block;
    margin: 0 auto;
    position: relative;
}

编辑：我对 img 的 bootstrap 规则的错误解释。

这个更好：

只要图像的宽度不超过其容器的宽度，图像就会以其原始尺寸渲染，而不是仅以其原始宽度渲染并溢出其包含框。

来自：http ://unstoppablerobotninja.com/entry/fluid-images/

于 2013-05-31T01:47:35.913 回答