4

div内に配置された画像があります。div の幅は 600 で、高さは可変です。

画像をdivの一番上に置きたいです。幅を 590 にすると、デザインの点で画像が高すぎて、ページ上であまりにも支配的に見えるという問題があります (画像の比率が約 4:3 などのため)。

だから私は画像を590×200にしたい。

.img { 
width: 590px;
max-height: 200px;
}

...その後、画像は div 内に正確に配置されます。ただし、写真自体は押しつぶされて 590 x 200 に歪んでいます。画像がそのサイズ内でトリミングされ、歪みがないことを確認するにはどうすればよいですか?

私は html にアクセスできないので、残念ながらラッパーを追加することはできません...これは、CSS クラス .img を編集することによってのみ行う必要があります。

編集 - Andy の言うとおりです。これを機能させる唯一の方法は、負のマージンです。ありがとう、アンディ。

4

3 に答える 3

3

css を編集するだけでは、これを行うことはできません。HTMLの背景画像として画像を配置する必要があります

<div class="cover">
    <div style="background-image: url(http://img.youtube.com/vi/6WNyczNYsc0/0.jpg); " class="video-thumbnail"></div>
</div>

そしてbackground-size: cover;cssでの使用

CSS

​.cover {
    width: 590px;
    height: 200px;
}
.video-thumbnail {
    height: 100%;
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-position: center;
}

デモはこちら

デモでは、背景位置を中央に配置しました。

于 2012-11-27T10:36:37.683 に答える
1

これを試して：

.img { 
width: auto;
max-height: 200px;
}

警告: 自動幅は IE7 では機能しません (IE8 についてはわかりません)。下位互換性のために js ソリューションを使用する必要がある場合があります。

于 2012-11-27T10:37:18.843 に答える
0

この画像を div background-image スタイルに入れてから、CSS3 スタイル - background-size: cover を使用できます。

于 2012-11-27T10:23:04.337 に答える