Как сделать изображение подходящим внутри элемента div, когда изображение будет больше, чем div?

У меня есть тег изображения внутри элемента div.

<div id = "myDiv">
 <img alt = "myImage" src = "some_source"/>
</div>

Изображение больше, чем div, поэтому изображение не находится внутри элемента div. Во-первых, я подумал об использовании width = x, height = y. Но поскольку я все еще разрабатываю страницу, я боюсь все время беспокоиться об этих двух измерениях.

Как сохранить изображение внутри элемента div? также, учитывая размеры элемента div?

Спасибо за помощь

Ответы

Ответ 1

Отсюда: Три способа изменения размера изображений в соответствии с DIV

Используя атрибут STYLE в теге IMG, вручную задайте ширину или высоту для каждого изображения (по существу, то же самое, что и # 1).

<div id="img_box">
<img style="width: 100%;" src="path/to/horizontal_image.jpg" />
</div>
<div id="img_box">
<img style="height: 100%;" src="path/to/vertical_image.jpg" />
</div>

Надеюсь, что он решает вашу проблему.

Изменить. Лучшее решение - фактически изменить размер изображения на стороне сервера script. Масштабирование изображений в браузере обычно не очень хорошо работает.

Edit2: http://unstoppablerobotninja.com/entry/fluid-images

Ответ 2

Это сработало для меня.

 .myimg {width:200px; height:auto;}

Автоматическое изменение размеров изображений во всех браузерах.

Ответ 3

Поскольку это сообщение было опубликовано некоторое время назад, я полагаю, что обновляю его более современным способом выполнения этого, который не требует JS.

Я бы рекомендовал использовать свойства CSS background-size:cover и background-position: center для растягивания, обрезки и размещения изображения (используя background-image, чтобы установить образ в div).

Будет установлено, что изображение будет уменьшаться или расти, чтобы соответствовать div, а затем обрезать что-либо за пределами div. Это отличный способ обработки изображений нескольких разных форм и размеров в div.

HTML

<div class="flexbox-container">
  <div class="filled-with-image"></div>
</div>

CSS

.flexbox-container {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-end;
  justify-content: center;
}

.filled-with-image {
  width: 50%;
  height:400px;
  background-image: url(http://unsplash.it/1500/1000?image=875);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  background-position: center bottom;
}

Смотрите код здесь

Ответ 4

Ребята, потратив слишком много времени на поиск более простого способа сделать это, я совмещаю информацию из исследования, чтобы сделать это следующим образом: (просто используя функцию getimagesize() - если высота больше ширины, эхо тег изображения со стилем, имеющим высоту 100%, повторяет один и тот же тег изображения, но со стилем, имеющим ширину 100%);

$image = "path to your image";
$img_size = getimagesize($image);

if ($img_size[0] < $img_size[1]){echo " < img src= '$image'  style='height:100%;'>";}
else {echo "< img src= '$image'  style='width:100%;'>";}