0

幅が約4000pxのインライン画像のページがあります（良い習慣でも悪い習慣でも構いません）。ビューポートに合うように画像を「トリミング」するCSSの方法はありますか？基本的には似background-size: coverていますが、インライン画像用です。

レスポンシブサイトであるため、すべての画像に次のCSSルールを追加しました。

img {
  max-width: 100%;
  height: auto;
}

さて、「切り抜かれた」画像については、、、＆ですべてを試しましたがoverflow、機能min-させることができませんでした。ブラウザは常に画像をビューポートに合わせます。の値を設定すると、画像が押しつぶされます。max-width-heighmin-height

4

2 に答える 2

3

cssを使用する場合は、cssを使用してイメージを設定することもできます。

HTML：

<div class="img1"></div>

Css：

.img1 {
    background-image:url(yourimagepath);
    height: 200px; /** A set size*/
    width: 300px; /** A set size*/
}

imageタグを使用する必要がある場合は、overflowプロパティを使用できます。

HTML：

<div class="img1">
    <img ....>
</div>

CSS：

.img1 {
    height: 200px; /** A set size*/
    width: 300px; /** A set size*/
    overflow:hidden;
}
于 2013-03-25T19:18:46.600 に答える
2

You can wrap the <img> in a container to achieve the cropped effect.

See example: http://jsfiddle.net/amyamy86/GZzru/

HTML:

<div class="image">
    <img src="http://www.bubblews.com/assets/images/news/616498554_1357418372.jpg" />
</div>

CSS:

.image {
    overflow: hidden;
    height: 500px;    /* crop size */
    width: 500px;
}
于 2013-03-25T19:23:59.727 に答える