0

クライアントのモード (ポートレートまたはランドスケープ) に基づいて画像のサイズを変更する必要があります。

ただし、jQuery が提供する高さは間違っているようです。画像は、max-height と overflow:hidden を持つラッピング DIV 内にありますが、報告された高さは height:auto のように見えます

これは私のHTMLです（例）

<div class="fix">
    <div class="content">
        <img src="">
    </div>
</div>
<div class="max">
    <div class="content">
        <img src="">
    </div>
</div>

CSS

div{
    border: 1px solid black;
    position:relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow:hidden;
}
.fix{
    height:200px;
    border: 1px solid red;
    overflow:hidden;
}
.max{
    max-height:200px;
    border: 1px solid blue;
    overflow:hidden;
}

そしてJSコード

$('.content').each(function(){
   alert($(this).height());
});

これが私のフィドルです：

http://jsfiddle.net/MLa9Z/

4

2 に答える 2

1

他の人が言ったように、チェックしている div は正しい高さを報告しています。彼らの両親は、あなたが制限を設定しているものです。

overflow: hiddenペイント プログラムではなく、ウィンドウのようなものと考えてください。窓の外を見て、木の一部が見える場合、木の残りの部分は「切り取られた」わけでも、存在しないわけでもありません...あなたはそれを見ることができません。木はまだ [ここに番号を挿入] フィートの高さです。

ここで、コンテナの代わりに、またはコンテナと同様にmaxおよびfixクラスをdiv に貼り付けると、コードは、レポートする必要があると思われるサイズをレポートします。content

于 2013-05-17T17:03:08.677 に答える
1

固定の高さを指定している div には 200px がありますが、その中の div (クラス コンテンツを含む) にはありません。基本的に、オーバーフロー コンテンツを非表示にしますが、コンテンツのサイズは変わりません。

要素を調べて、メトリック (chrome) またはレイアウト (firebug) タブを使用して実際の高さを表示してみてください。

画像のサイズを変更したい場合は、スタイルを親要素ではなく画像に直接適用する必要があります。それ以外の場合は、代わりに画像をトリミングします (overflow:hidden を使用)。

.fix img{
    height:200px;
}
于 2013-05-17T16:54:45.740 に答える