Ako dosiahnuť efekty CSS pre pozadie "obraz na pozadí: obal" pre dynamické obrázky? - html, css, obrázok, pozadie-obrázok, veľkosť pozadia

Pri použití nasledujúceho štýlu CSS obrázok úplne zakrýva div, pričom zachováva jeho proporcie:

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

Problém je v tom, že potrebujem vygenerovať URL obrázku pomocou PHP, a preto ho nemôžem špecifikovať vo vlastnosti CSS.

Ja radšej nepoužívam jQuery, JavaScript alebo vložené CSS. Kód, ktorý sledujem, vyzerá takto:

PHP

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

CSS

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

odpovede:

0 pre odpoveď č. 1

Váš kód PHP

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

a 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;
}

Tento kód pre obrázok funguje ako akcia na pozadí.

---

0 pre odpoveď č. 2

Nastaviť obrázok ako pozadie pre div ako riadkový štýl:

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;
}

---

0 pre odpoveď č. 3

Nakoniec som urobil nasledujúce, bez zmeny html alebo použitia iného jazyka:

PHP

$img_url = get_img_url();

HTML

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

CSS

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

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

---