CSS масштабирует изображение, чтобы оно соответствовало содержанию div, без указания исходного размера

Я хочу иметь сайт, на котором я могу загружать изображения разных размеров, которые будут отображаться в слайдере jquery. Кажется, я не могу (уменьшаю) изображение в содержащем div. Вот как я намереваюсь это сделать

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org    /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title> 
<link rel="stylesheet" type="text/css" href="Imtest.css"/>
</head>

<body>

<div id="wrapper"> 

<div id="im"><img src="Images/Scarpa2_1.jpg" /></div>

</div>  
</body>
</html>

И CSS

#wrapper {
    width: 400px;
    height: 400px;
    border: 2px black solid;
    margin: auto;
}

#im {
    max-width: 100%;
}

Я попытался установить максимальную ширину моего изображения на 100% в CSS. Но это не работает.

ОТВЕТЫ

Ответ 1

Вы можете использовать фоновое изображение , чтобы выполнить это;

Из MDN - Размер фона: Содержит:

Это ключевое слово определяет, что фоновое изображение должно быть масштабировано настолько, насколько возможно, при этом обе его размеры меньше или равны соответствующим размерам области фонового позиционирования.

Демо

CSS

#im {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("path/to/img");
    background-repeat: no-repeat;
    background-size: contain;
}

HTML:

<div id="wrapper">
    <div id="im">
    </div>
</div>

Ответ 2

Это старый вопрос, который я знаю, но это входит в первую пятерку для нескольких связанных поисков Google. Здесь только CSS-решение, не меняющее изображения на фоновые изображения:

width:auto;
height:auto;
max-width:MaxSize;
max-height:MaxSize;

Авто будет увеличивать (или уменьшать) ширину и высоту, чтобы занять пространство, указанное с помощью MaxSize. Он переместит любые значения по умолчанию для изображений, которые вы или браузер просмотра может иметь для изображений. Я нашел это особенно важным в Android Firefox. Пиксели или проценты работают для максимального размера. При высоте и ширине, заданной для авто, соотношение сторон исходного изображения будет сохранено.

Если вы хотите полностью заполнить пространство и не возражаете, чтобы изображение было больше его первоначального размера, измените две максимальные ширины на min-width: 100% - это позволит им полностью занять свое пространство и сохранить аспект рацион. Вы можете увидеть пример этого с фоновым изображением профиля Twitter.

Ответ 3

если вы хотите как ширину, так и высоту, вы можете попробовать

 background-size: cover !important;

но это не исказит изображение, а заполнит div.

Ответ 4

Это очень просто. Просто установите ширину img на 100%

Ответ 5

Я считаю, что это лучший способ сделать это, я пробовал, и он работает очень хорошо.

#img {
  object-fit: cover;
}

Здесь я нашел его. Удачи!

Ответ 6

На веб-странице, где мне хотелось, чтобы изображение масштабировалось с изменением размера браузера и оставалось наверху, рядом с фиксированным div, мне нужно было только использовать одну строку CSS: overflow:hidden;, и это сделало трюк, Изображение отлично масштабируется.

Что особенно приятно, так это то, что это чистый css и будет работать, даже если Javascript отключен.

CSS

#ImageContainerDiv {
  overflow: hidden;
}

HTML:

<div id="ImageContainerDiv">
  <a href="URL goes here" target="_blank">
    <img src="MapName.png" alt="Click to load map" />
  </a>
</div>

Ответ 7

Я использую это, как мелкие, так и большие изображения:

.product p.image {
text-align: center;
width: 220px;
height: 160px;
overflow: hidden;
}
.product p.image img{
max-width: 100%;
max-height: 100%;
}

Ответ 8

Некоторые из этих вещей не помогли мне... однако, это произошло. Может помочь кому-то еще в будущем. Вот CSS:

    .img-area {
     display: block;
     padding: 0px 0 0 0px;
     text-indent: 0;
     width: 100%;
     background-size: 100% 95%;
     background-repeat: no-repeat;
     background-image: url("https://yourimage.png");

    }

Ответ 9

Я использую:

объект-подгонка: обложка,
-o-object-fit: обложка;

для размещения изображений в контейнере с фиксированной высотой и шириной, это также отлично подходит для моих слайдеров. Тем не менее, он будет обрезать части изображения в зависимости от этого.