0

Hey Guys私は、このjqueryスクリプトとともに、ウェブサイトにtwitterブートストラップを使用しています:

$('.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);
});

});

私が抱えている問題は、レスポンシブ Web ページのサイズを変更するときです。小さなウィンドウでは、画像は同じサイズのままではありません。(タブレット、モバイルなど) 何かアイデアはありますか?

ウェブサイトは flyoutcricket.com です。助けてくれてありがとう。

4

1 に答える 1

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

これは、ブートストラップの img の CSS です。画像は常に、含まれるブロックの幅の 100% でサイズ変更され、高さは比例して維持されます。ただし、画像が絶対的に配置され、それを含む要素が静的に配置されている場合は、そうではありません。

したがって、CSS を変更して、これらの画像を含む要素が静的に配置されないようにします。

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

編集: img のブートストラップのルールの私の説明が悪い。

これの方が良い：

ネイティブの幅でレンダリングしてそれを含むボックスからはみ出すのではなく、幅がコンテナーの幅を超えない限り、画像はネイティブのサイズでレンダリングされます。

出典：http : //unstoppablerobotninja.com/entry/fluid-images/

于 2013-05-31T01:47:35.913 に答える