-2

画像ソースを CSSbackground-imageプロパティとして設定すると問題なく動作しますが、HTML 経由で画像ソースを設定すると完全に機能しなくなります。なんで？

.image1 {
  height: 100px;
  width: 100px;
  background-size: cover;
}

.image2 {
  height: 100px;
  width: 100px;
  background-size: cover;
  background-image: url('http://i.istockimg.com/cms/resources/images/HomePage/Tiles/EN_US/EN_US_2016_05/ExtendedHuman82598767.jpg');
}
<img class="image1" src="http://i.istockimg.com/cms/resources/images/HomePage/Tiles/EN_US/EN_US_2016_05/ExtendedHuman82598767.jpg"></img>

<img class="image2"></img>

この画像を幅と高さの組み合わせに関係なく正しく表示するには、CSS からソースを宣言する必要がありますか?

編集：質問の反対票が何のためにあるのかわかりません...高さと幅の両方を個別に変更しても元のアスペクト比を維持できるように、画像を自動的にトリミングできるかどうか知りたかっただけです。これは、背景画像を使用する場合は問題なく機能しますが、コンテンツでは明らかに機能しません。いずれにせよ、私は今答えを得ました。

4

1 に答える 1

1

IE 以外のブラウザでは、 のobject-fit: cover代わりに を使用できますbackground-size。

.image1 {
  height: 100px;
  width: 100px;
  object-fit: cover;
}

.image2 {
  height: 100px;
  width: 100px;
  background-size: cover;
  background-image: url('http://i.istockimg.com/cms/resources/images/HomePage/Tiles/EN_US/EN_US_2016_05/ExtendedHuman82598767.jpg');
}
<img class="image1" src="http://i.istockimg.com/cms/resources/images/HomePage/Tiles/EN_US/EN_US_2016_05/ExtendedHuman82598767.jpg"></img>

<img class="image2"></img>

于 2016-05-17T15:47:37.347 に答える