0

私はこのCSSでこの画像を持っています：

.containerImg {
    height: 420px;
    margin-top: 0;
    position: relative;
    width: 100%;
}

.img {
    margin: 0 auto;
    position: absolute;          /*unfortunately i can’t remove the position:absolute*/
}

そしてマークアップ：

<div class="containerImg">
<img class="img" alt="" src="img//section_es_2442.jpg">
<div class="info">
        …
          </div>
<div class="clear"></div>
</div>

.containerにあるのはimgだけではないことがわかるように投稿します

したがって、動作は、画像がすべての.container寸法を使用し、画像をトリミングする必要がありますが、元の比率を維持する必要があります。画像は1600x500（3,2：1）です。

だから、どうすればこれを達成できますか？

4

4 に答える 4

1

私があなたなら、次のコードを使用してimgの代わりにbackground-imageを使用します。

.containerImg {
    height: 420px;
    margin-top: 0;
    position: relative;
    width: 100%;
}

.img {
    margin: 0; 
    /*position: absolute;    I'll remove this */
    height: 420px;
    width: 100%; /*or use pixels*/
    background: transparent url('') no-repeat center top;
    overflow: hidden; /* not sure about you really need this */
}

と ：

<div class="containerImg">
  <div class="img" style="background-image: url('img/section_es_2442.jpg')"></div>
  <div class="info">
        …
  </div>
  <div class="clear"></div>
</div>

ビューポートのようなdivがあり、同じ比率とサイズの画像が背景になります。画像が大きい場合、追加のサイズはトリミングされたようになります:)

于 2011-10-31T10:35:51.677 に答える
0

意味がわからないのですが、画像を背景に設定できませんか？

.containerImg {
    height: 420px;
    margin-top: 0;
    position: relative;
    width: 100%;
    background-image: url("img/section_es_2442.jpg");
    background-position: center;
}

styleまたは、の属性で動的に構築されている場合<div class="containerImg">

于 2011-10-31T09:43:09.620 に答える
0 
.img {
    margin: 0 auto;
    position: absolute;
    max-height: 420px; /* Same height as container's */
    height: expression(this.height > 420 ? "420px" : true;    
}

幅を確認したい場合は、コンテナの幅を固定値に設定する必要があります...

ハッピーコーディング^^

于 2011-10-31T10:18:27.013 に答える