Question

嘿伙计我正在使用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。谢谢你的帮助。

Answer 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的规则的错误解释。

这样更好：

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

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

调整窗口大小时，图像不会保持相同的大小 - 推特引导程序

1 个答案: