сверстать блок, чтобы картинка не выезжала за пределы блока
Не могу запихнуть картинку в блок — все время выезжает снизу. Нужно картинку любого размера запихнуть в блок и чтобы эта картинка сама определяла размеры своего внешнего блока, в котором она находится (block-img), своими естественными размерами. Но при изменении размера своего блока(block-img) — адаптивилась в нем. И далее этот блок с картинкой передвигать в нужное место по основному блоку — . Ломаю голову целый день. Помогите, профессионалы!
Отслеживать
задан 30 апр 2017 в 18:19
1,514 6 6 золотых знаков 22 22 серебряных знака 38 38 бронзовых знаков
Добавьте может линки на библиотеки стилей, которые юзаете
30 апр 2017 в 18:23
Пользуйтесь ctrl + m чтобы чтобы показать код на примере его работы
30 апр 2017 в 18:24
30 апр 2017 в 18:49
не помогает вообще никак
30 апр 2017 в 18:56
Нарисуйте может как это должно выглядеть, желательно в нескольких вариантах (маленький, средний, большой экраны).
30 апр 2017 в 19:02
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
не знаю так или нет но как вариант пример 100% адаптивный , откроете снипет на весь экран и измените его размеры и увидите ..
* < margin: 0; padding: 0; >img < width: 300px; margin: 10px; float: left; >.clear, .clear:after, .clear:before < content: ""; display: block; clear: both; >.post < display: table; max-width: 700px; border: 1px solid red; margin: auto; >p < padding: 10px; >@media screen and (max-width:640px) < img < width: 60%; float: right; >p < text-align: center; padding: 10px; font-size: 16px; font-family: arial; >> @media screen and (max-width:480px) < img < width: 100%; float: none; margin: 0; >p < margin: auto; text-align: justify; padding: 10px; font-weight: 500; font-size: 14px; font-family: sans-serif; >> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum congue leo eget malesuada.Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Donec sollicitudin molestie malesuada. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla porttitor accumsan tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquet quam id dui posuere blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Donec rutrum congue leo eget malesuada. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Quisque velit nisi, pretium ut lacinia in, elementum id enim.
Картинка выходит за пределы DIV
Всем доброго времени суток. Такая проблему: php — скрипт на страницу из папки выгружает картинки. Все разной высоты и ширины. Сделал так чтобы эти картинки помещялись в DIVы, но не пойму как регулировать их размеры. Хотелось бы так : дивам задаю к примеру width:200px, height:100px, а картинки сжимались под эти размеры, сохраняя пропорции. пока что только за пределы дива выходят.
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Текст выходит за пределы Div’a
Здравствуйте, я надеюсь вы мне поможете советом. Ситуация следующая: Когда я меняю или добавляю.
Текст выходит за пределы div
Вот возникла проблема div фиксированой ширины и высоты если поигратся с маштабом текст выходит за.
Текст выходит за пределы div ucoz
Помогите пожалуйста!На моём сайте картинки и текст выходят за пределы,пожалуйста подскажите что.
Div выходит за пределы родительского блока при масштабировании (+скрин)
Есть внешний div (outer-outer), первый внутренний (outer), второй внутренний (inner) и внутри него.
61 / 61 / 12
Регистрация: 11.12.2009
Сообщений: 248
Попробуйте при выводе задать картинкам width:200px;
Регистрация: 04.07.2013
Сообщений: 16
попробуйте для картинки прописать:
max-width:100%;
если не подойдет, допишите еще и max-height:100%
269 / 261 / 35
Регистрация: 21.02.2012
Сообщений: 1,078
не, можно сделать так: пишите в стилях, родительский элемент, дпустим.
1 2 3 4
.blockForImg img{ width:100%; height:100%; }
но это при условии, что у родителя фиксированая выстоа и ширина.
либо, можно ему тупо написать так:
1 2 3
.blockForImg{ overflow:hidden; }
но это просто скроет картинки за краями блока
ну а вообще, есть в php функция, точно не помню, которая уменьшает картинки при загрузке, он легкая, но. я всетаки не помню как правильно писать
357 / 118 / 20
Регистрация: 08.01.2015
Сообщений: 1,361
Записей в блоге: 1
Сообщение от maximus2011 
но это просто скроет картинки за краями блока
А вот именно — как сделать, чтобы картинка отображалась полностью (масштабировалась) и ничего не скрывалось. Похоже, тег img имеет какие-то особенности.
333 / 309 / 168
Регистрация: 02.06.2014
Сообщений: 1,130
Подробнее про поддержку свойства object-fit браузерами
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
html lang="en"> head> meta charset="UTF-8"> title>Documenttitle> style> .box { width: 100px; height: 100px; border: 1px solid green; margin: 10px; } img { -o-object-fit: cover; object-fit: cover; width: 100px; height: 100px; } style> head> body> div class="box"> img src="https://www.placehold.it/200x293" alt=""> div> div class="box"> img src="https://www.placehold.it/400x293" alt=""> div> div class="box"> img src="https://www.placehold.it/100x215" alt=""> div> div class="box"> img src="https://www.placehold.it/260x233" alt=""> div> div class="box"> img src="https://www.placehold.it/200x200" alt=""> div> body> html>
Элементы изображений, медиа и форм
В этом уроке мы рассмотрим, как обрабатываются определённые специальные элементы в CSS. Элементы изображений, других медиа и форм ведут себя иначе при их стилизации в CSS чем обычные блоки. Понимание того, что возможно, а что нет спасут вас от лишних разочарований и этот урок прольёт свет на некоторые из этих основных вещей, которые вам нужно знать.
| Prerequisites: | Basic computer literacy, basic software installed, basic knowledge of working with files, HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps.) |
|---|---|
| Objective: | To understand the way that some elements behave unusually when styled with CSS. |
Замещаемые элементы
Изображения и видео описываются как Замещаемые элементы. Это значит, что CSS не может влиять на внутреннюю планировку этих элементов — только на их позицию на странице среди других элементов. Однако, как мы увидим, существуют различные вещи, которые CSS может сделать с изображением.
Конкретные замещаемые элементы, такие как изображения и видео, можно также описать, как элементы имеющие соотношение сторон. Это значит, что такой элемент имеет размер как по горизонтали (x) так и по вертикали (y) и будет отображаться используя «родные» размеры файла по умолчанию.
Размер изображений (калибровка)
Как вы уже знаете из этих уроков, всё в CSS генерирует блоки. Если вы поместите файл изображения внутрь блока, который больше или меньше исходного размера файла изображения в обоих направлениях, то он отобразиться либо в меньшем размере чем блок, либо перекроет его. Вам нужно принять решение с тем, что произойдёт с перекрытием.
В примере ниже у нас два блока, оба имеют размер по 200px:
- Один содержит изображение, которое 200px — оно меньше, чем блок и не растягивается что бы заполнить его.
- Второй больше 200px и перекрывает блок.
Так что же мы можем сделать с проблемой перекрывания?
Как мы учили в нашем предыдущем уроке, распространённая техника — это сделать max-width изображения — 100%. Это позволит уменьшить размер изображения по отношению к блоку, но не увеличит его. Такой метод будет работать и с другими замещаемыми элементами такими как или (en-US) .
Попробуйте добавить max-width: 100% к элементу в примере выше. Вы увидите, что меньшее изображение останется неизмененным, а большее изображение станет меньше, чтобы заполнить блок.
Вы можете сделать другие варианты изображений внутри контейнеров. Например, вы можете захотеть дать изображению такие размеры, чтоб оно полностью покрывало блок.
Здесь вам может помочь свойство object-fit . Используя object-fit , можно определять размеры замещаемого элемента для заполнения блока различными способами.
Ниже мы использовали значение cover , которое уменьшает изображение, сохраняя соотношение сторон так, что он аккуратно заполняет блок. Поскольку соотношения сторон сохраняются, некоторые части изображения будут обрезаны блоком.
Если мы используем contain в качестве значения, изображение будет уменьшаться до тех пор, пока не станет достаточно маленьким чтобы заполнить блок. Это приведёт к «почтовой упаковке», если оно не будет иметь такого же соотношения сторон, как блок.
Вы также можете попробовать значение fill , которое будет заполнять блок, но при этом не сохранять соотношение сторон.
Замещаемые элементы в вёрстке
При использовании различных методов вёрстки CSS на замещаемых элементах, вы можете обнаружить, что они ведут себя немного иначе, чем другие элементы. Например, во flex или grid layout элементы растягиваются по умолчанию чтобы заполнить всю площадь. Изображения растягиваться не будут, вместо этого они будут выравнены на начало площади flex- или grig-контейнера.
Вы можете увидеть, как это происходит в примере ниже, где мы имеем grid-контейнер из двух столбцов и двух строк, который содержит 4 объекта. Все элементы имеют цвет фона и растягиваются чтобы заполнить строки и столбцы. Однако, изображение не растягивается.
Если вы изучаете эти уроки по порядку, тогда вы, возможно, ещё не рассматривали layout. Просто держите в уме, что замещаемые элементы, становясь частью grid- или flex-разметки, ведут себя иначе по умолчанию, главным образом, чтобы избежать их странного растяжения по разметке.
Для того чтобы заставить изображение растянуться чтобы заполнить grid-ячейку, вы должны сделать что-то наподобие следующего:
img width: 100%; height: 100%; >
Это, однако, растянет изображение, и скорее всего это не то чего бы вам хотелось делать.
Элементы форм
Элементы форм могут быть сложной проблемой когда дело касается их стилизации в CSS, и Web Forms module содержит детальные руководства по хитрым аспектам стилизации элементов форм, которые я не буду представлять здесь в полном объёме. В этом разделе статьи стоит выделить несколько ключевых моментов.
HTML5 также содержит атрибуты, которые позволяют веб-разработчикам указывать какие поля являются обязательными и даже тип контента, который необходимо вводить. Если пользователь вводит неожидаемые данные или оставляет обязательные поля пустыми, браузер может выдать сообщение об ошибке. Разные браузеры несовместимы в том, сколько стилей и настроек они допускают для таких элементов.
Стилизация элементов ввода текста
Элементы, позволяющие вводить текст, такие как , конкретные типы вроде , и элемент , являются довольно простыми в стилизации и как правило ведут себя также, как и другие блоки на вашей странице. Однако, стилизация по умолчанию таких элементов будет отличаться в зависимости от операционной системы и браузера которые использует пользователь, посещая сайт.
В примере ниже мы стилизовали несколько вводов текста используя CSS — вы можете увидеть, что такие вещи как borders, margins и padding, все применяются так как вы бы ожидали. Мы используем селекторы атрибутов для выборов различных типов ввода. Попробуйте изменить то, как эти формы выглядят, регулируя границы, добавляя цвет фона полям и изменяя шрифты padding.
Предупреждение: Важно: При изменении стиля элементов формы следует соблюдать осторожность, чтобы убедиться, что для пользователя все ещё очевидно, что они являются элементами форм. Вы можете создать форму ввода без границ и фона, которая практически неотличима от окружающего контента и это может сделать очень сложно распознаваемой, чтобы заполнить её.
Как объяснено в уроке стилизация форм в части HTML этого курса, многие из более сложных типов ввода определяются операционной системой и не доступны для стилизации. Поэтому вы всегда должны предполагать, что формы будут выглядеть по-разному для разных пользователей и тестировать сложные формы во многих браузерах.
Наследование и элементы форм
В некоторых браузерах, элементы форм не наследуют стиль шрифтов по умолчанию. Поэтому если вы хотите быть уверенными что ваши поля форм используют шрифт определённый в body или родительском элементе, вы должны добавить это правило в ваш CSS.
button, input, select, textarea font-family: inherit; font-size: 100%; >
Элементы форм и box-sizing
В разных браузерах элементы формы используют разные правила определения размеров блоков для разных виджетов. вы изучали свойство box-sizing в нашем уроке Блоки в CSS и можете использовать эти знания при стилизации форм для обеспечения единообразия при настройке ширины и высоты элементов форм.
Для единообразия рекомендуется устанавливать margin и padding на 0 для всех элементов, а затем добавлять их (margin и padding) при стилизации отдельных элементов.
button, input, select, textarea box-sizing: border-box; padding: 0; margin: 0; >
Другие полезные настройки
В дополнение к правилам отмеченных выше, вы должны также установить overflow: auto для чтобы IE не отображал полосу прокрутки, когда в этом нет необходимости:
textarea overflow: auto; >
Собираем все вместе в «перезагрузку»
В качестве последнего шага, мы можем обернуть различные свойства, обсуждаемые выше, в следующую «форму перезагрузки», чтобы обеспечить согласованную основу для работы. Это включает все элементы упомянутые в последних трёх разделах:
button, input, select, textarea font-family: inherit; font-size: 100%; box-sizing: border-box; padding: 0; margin: 0; > textarea overflow: auto; >
Примечание: Normalizing stylesheets are used by many developers to create a set of baseline styles to use on all projects. Typically these do similar things to those described above, making sure that anything different across browsers is set to a consistent default before you do your own work on the CSS. They are not as important as they once were, as browsers are typically more consistent than in the past. However if you want to take a look at one example, check out Normalize.css, which is a very popular stylesheet used as a base by many projects.
Для дополнительной информации по стилизации форм, посмотрите две статьи в разделе HTML этого руководства.
Summary
This lesson has highlighted some of the differences you will encounter when working with images, media, and other unusual elements in CSS. In the next article we’ll look over a few tips you’ll find useful when you have to style HTML tables.
In this module
- Cascade and inheritance
- CSS selectors
- Type, class, and ID selectors
- Attribute selectors
- Pseudo-classes and pseudo-elements
- Combinators
- The box model
- Backgrounds and borders
- Handling different text directions
- Overflowing content
- Values and units
- Sizing items in CSS
- Images, media, and form elements
- Styling tables
- Debugging CSS
- Organizing your CSS (en-US)
Почему картинка вылезает за пределы блока?
Подскажите почему картинка вылезает за пределы блока a?
- Вопрос задан более трёх лет назад
- 44044 просмотра
Комментировать
Решения вопроса 2
Ankhena @Ankhena Куратор тега CSS
Нежно люблю верстку
Потому что вы задали display: inline-block;
Сделайте картинку просто блочной или задайте vertical-align: top
https://webref.ru/css/vertical-align
p.s. не используйте id для стилизации, пишите классы.
Ответ написан более трёх лет назад
Нравится 2 1 комментарий
whiteredfox @whiteredfox
Я так выровняла картинку внутри ссылки внутри текста. display: inline-block установила у img, а с высотой vertical-align: bottom помогло) Мерси.
Оптимизирую PageSpeed & Performance
Вылазит из-за того, что #header имеет line-height: 60px; а блочно-строчные элементы выровнялись по базовой линии.