Как вы растягиваете изображение с помощью CSS?

Question

У меня есть следующее css:

.mod.left {
background-image: url("http://www.myimage.jpg");
display: block;
height: 160px;
overflow: hidden;
width: 175px;
}

Это соответствует этому HTML:

<div class="mod left"></div>

Это приводит к этому беспорядку:

Есть ли способ растянуть изображение, чтобы соответствовать div?Даже за счет качества изображения?Спасибо!

Answer 1

Вы можете использовать свойство CSS3 background-size . Но в настоящее время он широко не поддерживается.

Answer 2

<div>
    <img src="yourImage.jpg" alt="" />
</div>

div{width:300px; height:300px; overflow:hidden;} //example
img{width:100%;}

Таким образом, изображение будет изменяться по горизонтали, чтобы охватить весь ваш div. Не устанавливая высоту, автоматически сделаем пропорциональное изменение размера. Я предлагаю вам поставить overflow:hidden; на ваш div. Если соотношение изображений не совпадает, превышение будет скрыто.

Answer 3

Для этого вы можете использовать background-size атрибут CSS.

http://www.w3schools.com/cssref/css3_pr_background-size.asp