-1

この質問に続い<img>て、アスペクト比を維持しながら（ラッパーを追加せずに）、それを歪めずにcssでトリミングするための新しいソリューションがあるかどうか疑問に思っていました。

例: があるとしましょう<img src="#">。min-height:200px;この画像を に保ったまま、水平方向に伸ばさずに に達したときにトリミングすることは可能でしょうwidth:100%;か?

純粋なcssで、ラッパーとjavascriptなしでこれを行うことはできますか?

  • 他の質問で、唯一のオプションは負のマージンを使用することであると読みましたが、その解決策はほのめかされているだけで、実際には説明されていません。
  • さらに、別の可能な解決策として を使用することもできますがclip、それは要素をドキュメント フローから外してしまいます。つまり、 を使用clipする解決策では、要素を元の場所に再配置する必要があります (他のコンテンツを押しのけます)。
  • リンクされた質問の別の回答は、生成されたコンテンツの使用を示唆していましたが、私が知る限り、生成されたコンテンツは html (テキストのみ) を挿入できないため、これがどのように機能するかわかりません。
4

1 に答える 1

0

これを行う唯一の（そして最も簡単な）方法は、画像をdivまたはimgの背景として配置することだと思います。

この画像があり、右側の男性の顔だけをトリミングしたいとしましょう。

次のようなことができます。

HTML: 

<div class="img"></div>  
<!-- OR -->
<img class="img"/>

CSS: 

.img{
    width:250px;
    height:250px;
    background-image:url(http://casafamilyday.org/familyday/files/media/Family%20of%204%20outside_new%20homepage%20photo.jpg);
    background-position:300px 0;
}

ここで FIDDLE
を使用すると、HTML の 1 つの要素だけを使用して簡単に画像をトリミングできますbackground-image。プロパティを JavaScript に置き換えることで、動的に画像を簡単にインポートできます。

于 2013-04-11T13:48:55.467 に答える