نسخه نمایشی

<!DOCTYPE HTML>
<html>
<head>

<style>

div1 {
    border: 1px solid black;
    height:150px;
    width:180px;
    background:url(img_flwr.gif);
    background-repeat: no-repeat;
}

div2 {
    border: 1px solid black;
    height:150px;
    width:180px;
    background:url(img_flwr.gif);
    background-repeat: no-repeat;
    background-size: contain;
}

div3 {
    border: 1px solid black;
    height:150px;
    width:180px;
    background:url(img_flwr.gif);
    background-repeat: no-repeat;
    background-size: cover;
}

</style>

</head>

<body>

<p>با تغییر سایز پنجره مرورگر تفاوت را بهتر ببینید</p>

<div>
<p>سایز واقعی تصویر</p>
</div>

<div>
<p> contain استفاده از کلید</p>
</div>

<div>
<p> cover استفاده از کلید</p>
</div>

</body>
</html>

با تغییر سایز پنجره مرورگر تفاوت را بهتر ببینید

سایز واقعی تصویر

contain استفاده از کلید

cover استفاده از کلید