html - 動的画像の "background-image: cover" CSS 効果を実現するにはどうすればよいですか?

Question

次の CSS スタイルを使用すると、画像は div を完全にカバーしますが、その比率は維持されます。

div {
  background: url(images/plants/flower.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

問題は、PHP を使用して画像 URL を生成する必要があるため、CSS プロパティで指定できないことです。

私は jQuery、JavaScript、またはインライン CSS を使用しないことを好みます。私が求めているコードは次のようになります。

PHP

$img_url = get_img_url();
echo '<div><img src="' . $img_url . '"></div>';

CSS

 div {
  width: 600px;
  height: 200px;
}
img {
  size: cover;
}

Answer 1

HTMLを変更したり、他の言語を使用したりせずに、最終的に次のことを行いました。

PHP

$img_url = get_img_url();

HTML

<div>
  <img src="<?php echo $img_url; ?>">
</div>

CSS

div {
  width: 600px;
  height: 200px;
}

div img {
  min-width: 100%;
  min-height: 100%;
}

Answer 2

あなたのPHPコード

$img_url = get_img_url();
echo '<div class='dynamic-image'><img src="' . $img_url . '"></div>';

とCSS

.dynamic-image{
position:relative;
 width: 600px;
    heigh: 200px; 
}

.dynamic-image img{
 position:absolute;
 width:100%;
 height:100%;
 top:0; left:0;z-index:-1;
}

この img のコードは、背景画像アクションのように機能します。

Answer 3

インライン スタイルとして、画像を div の背景として設定します。

PHP:

$img_url = get_img_url();
echo '<div style="background-image: '.$img_url.'"></div>';

CSS:

div {
    width: 600px;
    heigh: 200px;
    background-size: cover;
    background-repeat: no-repeat;
}