При уменьшении окна браузера блок с изображением уходит вниз.
Каким образом можно уменьшать изображение при уменьшении размеров окна браузера средствами css?
Пробовал стиль изображения
.
center img {
max-width: 100%;
height: auto;
}
Не помогает.
html
css
layout
float
3
Проценты высчитываются относительно родительского блока, а его у вас нет. Добавьте блоку .center стиль position:relative; и тогда изображение не будет выходить за его пределы.
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
css3 — Как изменить размер картинки в нужном DIV через CSS для мобильной версии?
Задать вопрос
Вопрос задан
Изменён
4 года 3 месяца назад
Просмотрен
253 раза
Подскажите пожалуйста, как прописать параметры изображения конкретно для одного типа картинок, которые выводятся у меня как обложка к посту?
Я обычно использовал такую вставку прямо в посту
<style>
@media only screen and (min-width : 320px) and (max-width : 480px) {
img {width: 100%;}
}
</style>
Но, в CSS файл когда я вставляю код:
@media only screen and (max-device-width: 480px) {
div#single-featured-image-header {
width: 100%;
}
Рушиться вся верстка. Как видно по коду, мне нужны изменения только в div’е : single-featured-image-header
Что я не так делаю? Буду рад помощи…
css
css3
вёрстка
адаптивная-верстка
1
Вы похоже забыли закрыть @media
Вместо
@media only screen and (max-device-width: 480px) {
div#single-featured-image-header {
width: 100%;
}
Надо
@media only screen and (max-device-width: 480px) {
div#single-featured-image-header {
width: 100%;
}
}
Основная проблема в моём случае, что нужно было ставить «.», а не #
media only screen and (max-device-width: 480px) {
.single-featured-image-header {
width: 100%;
}
}
Спасибо за активность. Я тут первый раз. Теперь буду знать, куда бежать за помощью )
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
html — Как изменить размер изображения с помощью CSS без изменения качества изображения
спросил
Изменено
1 год, 10 месяцев назад
Просмотрено
44к раз
У меня есть карусель Bootstrap с кодом ниже; как я могу изменить размер этого изображения, чтобы полностью заполнить карусель с потерей качества изображения, а также убедиться, что высота изображения не превышает ширину или высоту карусели?
Используйте свойство подгонки объекта в вашем css и задайте фиксированную ширину и высоту для
ваш тег изображения или соответствующий класс, чтобы каждое изображение имело одинаковую ширину и высоту, теперь ваше изображение не будет искажено.
.d-блок w-100 {
ширина:100%;
высота: 550 пикселей;
объект подходит: обложка;
положение объекта: 50% 50%;
}
Вы можете сделать изображение со 100% шириной и высотой автоматически.
2
Старый код :
<дел>
<дел>
Последние
{{статьи.название}}
<дел>
{% lorem 1 p %}
<дел>
{% lorem 1 p %}
Отредактируйте элемент карусели с помощью:
ширина: 100%;
высота: авто;
2
Другой альтернативой является использование фоновых изображений css вместо тегов img и использование свойства обложки background-size, которое имеет большую поддержку браузера по сравнению со свойством соответствия объекта img.
<дел>
.carousel-item{
высота: 500 пикселей;
цвет фона: #000;
фоновая позиция: центр;
размер фона: обложка;
фоновый повтор: без повтора;
}
Размер моего предыдущего изображения был 960px*720px. Я использовал его для логотипа. Это помогло уменьшить размер без растяжения.
Используя селектор CSS, чтобы указать на это изображение, отрегулируйте высоту
{ height: 100px;}
Значение ширины по умолчанию — авто.
Вы можете настроить значение высоты по своему усмотрению в зависимости от того, к чему вы стремитесь.
Я столкнулся с той же проблемой, и я исправил ее, добавив d-flex и выровняв содержимое по центру изображений, как это,
Вы должны использовать поле внутри класса .slide-control , иначе слайд пойдет, конец левой стороны.
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость
Электронная почта
Обязательно, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Пропорциональное изменение размера изображений с сохранением соотношения сторон
Иногда изображения слишком велики для отображения на веб-странице. Нам не нужен JavaScript, чтобы исправить это. Мы можем пропорционально изменять размеры изображений с помощью тегов изображений HTML или стилей фона CSS. Давайте посмотрим на различные параметры, которые у нас есть для изменения размера изображений, сохраняя при этом их соотношение сторон.
Изменение размеров тегов изображений HTML
Наш первый выбор — установить только одно свойство размера, либо ширина , либо высота , браузер автоматически рассчитает размер другого края.
Представьте, что у нас есть изображение кота с соотношением сторон 4:3 , другими словами, его размеры 4032 × 3024 , это много кота.
Если мы хотим, чтобы он отображался немного меньше, мы можем установить width на 240 , тогда браузер автоматически рассчитает высоту как 180 .
Есть одно предостережение. Изображения доступны не сразу.
Браузер отобразит страницу, дождется загрузки источника изображения, а затем обновит высоту элемента изображения. Это, скорее всего, приведет к тому, что браузер отобразит страницу дважды, потому что после обновления высоты изображения все элементы под изображением смещаются вниз.
Это плохая новость для производительности вашей страницы.
Лучше всего установить предполагаемый размер, чтобы браузер мог зарезервировать место.
Но что, если мы не знаем соотношение сторон изображения и получаем квадратное изображение кота? Наш кот не раздавится? Да, да, бедный кот.
Но не бойтесь, мы можем исправить это с помощью CSS.
изображение {
подходит для объекта: содержит;
}
Pass cover вместо содержит , чтобы указать браузеру заполнить весь тег изображения кошачьими пикселями.
изображение {
объект подходит: обложка;
}
Что делать, если наше изображение нужно ограничить шириной родительского элемента? В этой ситуации мы можем использовать CSS max-width или width , чтобы соответствовать изображению.
Использовать макс. ширина: 100% , чтобы ограничить размер, но разрешить меньшие размеры изображения, используйте width: 100% , чтобы всегда масштабировать изображение в соответствии с шириной родительского контейнера.
<дел>
раздел {
ширина: 240 пикселей;
граница: 1px сплошной розовый;
}
картинка {
максимальная ширина: 100%;
подходит для объекта: содержит;
}
Далее мы можем использовать CSS, чтобы исправить соотношение сторон изображения, узнать больше о представлении изображений с определенным соотношением сторон.
Изменение размера фоновых изображений CSS
По умолчанию background-image будет повторяться поверх фона элемента, если он меньше, если больше, то масштабироваться не будет, но части изображения не будут видны. В приведенном ниже примере нижняя и правая часть нашего кота не визуализируются.
<дел>
раздел {
фон: url('cat. jpeg') без повтора;
граница: 1px сплошной розовый;
}
Мы можем исправить это, установив свойство background-size . Чтобы поместить изображение внутри элемента, мы используем содержат значение . Браузер поместит изображение внутри границ элемента и пропорционально масштабирует его.
<дел>
раздел {
фон: url('cat.jpeg') без повтора;
размер фона: содержит; /* масштабирует изображение */
фоновая позиция: центр; /* центрирует изображение */
граница: 1px сплошной розовый;
}
Подобно object-fit , мы также можем использовать значение cover , чтобы сообщить браузеру, что элемент должен быть покрыт пикселями кошки. Как вы можете видеть ниже, это заставит его уменьшиться настолько, чтобы соответствовать вертикальному пространству, теперь обрезана только правая сторона нашего кота.
<дел>
раздел {
фон: url('cat.jpeg') без повтора;
размер фона: обложка;
граница: 1px сплошной розовый;
}
Мы также можем указать единственное значение width для свойства background-size .
Как видно по коду, мне нужны изменения только в div’е : single-featured-image-headercloudflare.com/ajax/libs/twitter-bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet"/>
<дел>
<дел>
{% lorem 1 p %}
Нам не нужен JavaScript, чтобы исправить это. Мы можем пропорционально изменять размеры изображений с помощью тегов изображений HTML или стилей фона CSS. Давайте посмотрим на различные параметры, которые у нас есть для изменения размера изображений, сохраняя при этом их соотношение сторон.
jpeg') без повтора;
граница: 1px сплошной розовый;
} 