Растянуть изображение, чтобы соответствовать 100% высоты и ширины Div

У меня есть div со следующим CSS

#mydiv{
    top: 50px;
    left: 50px;
    width: 200px;
    height: 200px;
}

и мой HTML выглядит как

<div id = "mydiv">
    <img src = "folder/file.jpg" width = "200px" height = "200px">
</div>

Я бы хотел, чтобы мой веб-образ всегда был того же размера (в аспекте формата 1:1), независимо от разрешения изображения. Если мои фактические файлы изображений квадратные (с соотношением 1:1), то это не проблема. Но если фактические файлы изображений не являются квадратными, отображаемое веб-изображение растягивается до 100% от высоты и ширины div (в данном случае 200 пикселей).

Как мне получить разные размеры изображений для моего DIV?

Ответ 1

Вы смешиваете записи. Это должно быть:

<img src="folder/file.jpg" width="200" height="200">

(обратите внимание, нет px). Или:

<img src="folder/file.jpg" style="width: 200px; height: 200px;">

(с использованием атрибута style) Атрибут style может быть заменен следующим CSS:

#mydiv img {
    width: 200px;
    height: 200px;
}

или

#mydiv img {
    width: 100%;
    height: 100%;
}

Ответ 2

Вместо того, чтобы устанавливать абсолютную ширину и высоту, вы можете использовать проценты:

#mydiv img {
    height: 100%;
    width: 100%;
}

Ответ 3

Или вы можете добавить CSS,

<style>
div#img {
  background-image: url("file.png");
  color:yellow (this part doesn't matter;
  height:100%;
  width:100%;
}
</style>