7

レスポンシブ サイトで作業しているため、幅の設定を使用できません。

すべて正方形にトリミングする写真が必要です。正確な測定値を定義することはできませんmax-width:100%。これは、コンテナーに対して (ブラウザーの幅に対して) サイズを調整するレスポンシブ イメージにする必要があるためです。

使用を提案する多くのソリューションを見てきましたが、これは不可能です。タグbackground-imageでなければなりません。imgまた、IE8 でも動作する必要があります。

何か案は？

私は現在持っています：

.views-field-field-photo img {
    width: 100%;
    height: auto;
    }



    <div class="field-content">
<img src="imagehere" >
</div>
4

2 に答える 2

23

padding-bottomポジショニングと一緒に使用するとoverflow:hidden、応答性の高い正方形のコンテナーを作成できます。

.field-content{
    width:80%;
    padding-bottom:80%;
    margin:1em auto;
    overflow:hidden;
    position:relative;
    background:#000
}

.field-content img {
   position:absolute;
   width:auto;
    min-width:100%;
    min-height:100%;
}

デモ

スケーリング時の jQuery DEMO センターの画像

いくつかの js を整理して、複数の画像を拡大縮小し、4 つの画像を単純なグリッドに配置できるようにしました

于 2013-05-22T11:29:09.677 に答える
-1

あなたはオーバーフローのようなことをすることができます:hidden 私はあなた自身のサイズを定義できる100pxの正方形を作りました.

HTML

<div id="frame">
<img src="your image"/>
</div>

CSS

#frame{
width:100px;
height:100px;
overflow:hidden;
}

#frame img{
width:auto;
height:100%;
min-width:100px;
min-height:100px;
}
于 2013-05-22T11:10:27.100 に答える