Я хочу иметь веб-сайт, где я могу загружать изображения разных размеров для отображения в слайдере 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. Но это не работает.
Для этого можно использовать фоновое изображение;
Из MDN - Размер фона: содержать:
Это ключевое слово указывает, что фоновое изображение должно быть масштабировано до максимально возможного размера, при этом оба его размера должны быть меньше или равны соответствующим размерам области позиционирования фона.
[Demo][3]
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>
Это старый вопрос я знаю, но этот входит в пятерку лучших для нескольких родственных поисков Google. Здесь'с единственным решением для CSS без изменения изображений фоновых изображений:
width:auto;
height:auto;
max-width:MaxSize;
max-height:MaxSize;
Авто будет увеличить (или уменьшить) ширину и высоту, чтобы занять место вы определяете параметр maxsize. Он будет ездить по умолчанию для изображений или просмотра'ы браузер для изображений. Я'вэ нашел это's особенно важно на Android'ы для Firefox. Пикселах или процентах работать на максимальный размер. С высотой и шириной для автоматического соотношения сторон исходного изображения будут сохранены.
Если вы хотите заполнить пространство целиком и Дон'т ум изображения больше, чем его оригинальный размер, изменить два максимум-шириной до мин-ширина: 100% - это сделает их полностью занять свои места и сохранять соотношение сторон. Вы можете увидеть пример этого с профиля Twitter'ы фоновое изображение.
если вам нужна и ширина, и высота, вы можете попробовать
background-size: cover !important;
но это не исказит изображение, а заполнит div.
Это очень просто. Просто установите ширину img равной 100%
Я считаю, что это лучший способ сделать это, я'вэ попробовал его и он работает очень хорошо.
#img {
object-fit: cover;
}
Здесь я нашел это. Удачи!
Надеюсь, это ответит на вековой проблемы (не используя CSS фон имущество)
В формате HTML
<div class="card-cont">
<img src="demo.png" />
</div>
УСБ
.card-cont{
width:100%;
height:150px;
}
.card-cont img{
max-width: 100%;
min-width: 100%;
min-height: 150px;
}
Некоторые из этих вещей не работает для меня... однако, это сделал. Может помочь кому-то в будущем. Вот код 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");
}
На веб-странице, где я хотел в изображения в масштабе с браузера изменить размер и оставаться на вершине, рядом с фиксированный див, я должен был использовать один CSS в строке: переполнение:скрытый;
и он сделал свое дело. Изображение прекрасно Весов.
Что особенно приятно, это то, что это чистый CSS и будет работать, даже если JavaScript отключен.
Усс:
#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>
Я использую:
объект-подходит: обложка; -o-объект-посадка: обложка;
разместить изображения в контейнер с фиксированной высотой и шириной, это также работает отлично подходит для моей движки. Однако он будет вырезать части изображения, в зависимости от его'ов.