Как в div вставить картинку: CSS: вписываем изображение в область — Блог

Разное
8 Июл, 2023
0

Содержание

html5 — как воткнуть картинку в div, чтобы она не вылезала за края div

Вопрос задан 5 лет 11 месяцев назад

Изменён 1 год 3 месяца назад

Просмотрен 8k раз

<div>
    <div>
        <div>
            <div>
                <div></div>
                <div>
                    <img src="img/expert.png"/>
                </div>
            </div>
       </div>
   </div>

html5
css3
bootstrap

Нужно использовать максимальную ширину картинки, т.е.

img {
max-width: 100%;
}

.sec-con-img img {
  max-width: 100%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.  bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh5u" crossorigin="anonymous">
</head>

<body>
  <div>
    <div>
      <div>
        <div>
          <div></div>
          <div>
            <img src="http://www.apicius.es/wp-content/uploads/2012/07/IMG-20120714-009211.jpg" />
          </div>
        </div>
      </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>

</html>

Для этого в Bootstrap есть класс img-responsive, благодаря которому изображения занимают всю ширину родительского элемента, не выходя за его границы.

По сути, он состоит из стилей:

max-width: 100%; height: auto; display: block;

Для вашего случая достаточно дополнить код картинки этим классом:

<img src="img/expert.png"/>

http://getbootstrap.com/css/#images

Если изображение находится в div, то в CSS нужно тому самому div задать параметр

overflow: hidden:

HTML

<div>
<img src="png.png" alt="">
</div>

CSS

.comp {
overflow:hidden;
}

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Как вставить картинку в HTML-файл.

Самоучитель HTML

Прежде чем приступить к изучению я предлагаю вам скачать архив с картинками, которые я подготовил для примеров, а так-же десяток заготовок для изготовления баннеров 468х60 и 88х31. Этот архив весит всего 1мБ.

После скачивания распакуйте архив, далее в нашей my_site создайте папку images и переместите все картинки из архива в нее.

Браузеры способны вывести на эран только три формата(расширения) изображения:
1) file.JPG— чаще всего в этом формате сохраняются фотографии.
2) file.GIF— может может быть прозрачным и принимать анимационный эффект.
3) file.PNG— в отличии от GIF, если в предыдущем можно либо установить прозрачность либо нет, то PNG можно эту прозрачность задать в процентах от 0 до 99.
Но в данном разделе для нас это не имеет большого значения, т.к. мы собираемся использовать картинки, а не изготавливать их.

Графика(картинки) в HTML-документ вставляется при помощи <IMG> и обязательных атрибутов ALT и SRC.

ALT— альтернативный текст нам уже знаком из ссылок, в картинках он выполняет несколько ролей, если у вашего пользователя браузер не поддерживает данный формат изображения или просто графика отключена, а так-же если вы не указали правильный путь к картинке или просто напросто забыли ее туда положить или случайно удалили, то будет отображаться этот текст.
SRC в этом атрибуте мы прописываем путь к изображению, пути как и к ссылкам могут быть абсолютными или относительными.
А это основной шаблон: <img src=»путь/имя_файла» alt=»альтернативный текст»>

А теперь закрепим все на практике и создадим файл grafika.html:

        <html>
        <head>
        <title>картинки в хтмл</title>
        </head>
        <body>
             <img src="images/logotip.png" alt="Супер сайт">
        </body>
        </html>

А теперь просмотрим(откроется в новой вкладке) что у нас получилось.

Чтобы к этому больше не возвращаться, то тег IMG как и ссылки может иметь атрибут TITLE
<img src=»images/logotip.png» alt=»Супер сайт» title=»краткая информация» >

Так-же можно выравнять картинку при помощи знакомого уже атрибута ALIGN
<img src=»images/logotip.png» alt=»Супер сайт» align=»right»>по правому краю
<img src=»images/logotip.png» alt=»Супер сайт» align=»left»> по левому краю
Атрибут align=»center» почти все браузеры игнорируют и потому если нужно картинку выравнять по центру, то просто поместите картинку в DIV с этим атрибутом
<div align=»center»><img src=»images/logotip.png» alt=»Супер сайт»>

</div>
давайте так и сделаем с нашим файлом grafika.html:

        <html>
        <head>
        <title>картинки в хтмл</title>
        </head>
        <body>
          <div align="center"><img src="images/logotip. png" alt="Супер сайт"></div>
        </body>
        </html>

Атрибут border=»0″ задает бордюр(кайму) вокруг картинки,
<img src=»images/logotip.png» alt=»Супер сайт» border=»0″>
Дело все в том что некоторые браузеры по умолчанию для картинки имеют значение ноль(как в моем примере), а некоторые 1, вам нужно определиться нужен ли вам этот бордюр или нет и желательно всегда использовать этот атрибут с нужным вам значением. Самостоятельно подставте этот атрибут в файл

grafika.html сначала с значением 0, потом 1 а потом 5 или 10 и поймете смысл бордюра.

Как задать размер картинки?, при помощи атрибута:
width— задает ширину картинки в пикселях(точках) и в некоторых случаях в процентах, на пример если картинка лежит в таблице, но о таблицах немного позже…
height — задает высоту картинки только в пикселях.

Что такое пиксель(точка)? Каждый монитор имеет свое разрешение, это зависит от размера монитора.

Чтобы посмотреть какое разрешение у вас просто на голом(не на ярлыке или файле) рабочем столе нажмите правую кнопку мышки и выберите свойства и там кликните на вкладку параметры, справа по центру вы увидите свое разрешение. Ну например у меня 1280х800, у вас оно может быть больше или меньше. Так вот если разбирать мой пример то мой экран может отобразить 1280пикселей по ширине и 800пикселей по высоте. Ну не смотря какое расширение у вас или у меня, есть категория ползователей у которых разрешение всего 800х600, это может быть в древних мониторах или продвинутый телефон с интернетом, я веду к тому что лучше не использовать картинки больше чем 800 пикселей по ширине!!! И этим посетителям будет не очень комфортно находиться на вашем сайте если картинки или другие объекты будут больше 800!!!

Но вернемся к «нашим» картинкам и файлу grafika.html, зададим размеры, а потом сохраним и посмотрим самостоятельно.
<img src=»images/logotip.png» alt=»Супер сайт» width=»607″>
Ни чего не изменилось? И вы совершено правы!!! это и есть его естественный размер данной картинки, но его можно изменить, например задать width=»800″ и в этом случае картинка растянется по ширине но стает узкой по высоте. Можно задавать только ширину, если нашей картинке ширина равна 607, а мы зададим 800, то высота 124 автоматически станет приблизительно 160пикселей, т.е. увеличится на тот-же процентный размер.

Коммуникаторы важны. Поэтому своевременное исправление поломок на HTC очень важно.

html — Позиция div внутри изображения (отзывчивый)

спросил 8 лет, 4 месяца назад

Изменено 8 лет, 4 месяца назад

Просмотрено 28 тысяч раз

У меня проблема (очевидно). Я должен расположить элемент так, чтобы он всегда был справа от изображения. Но я не могу использовать img-тег в качестве контейнера. Также я использую bootstrap, что делает невозможным установку фиксированной ширины для контейнера.

Небольшой пример jsFiddle

 
  <дел>
      Некоторый текст
  
   it/300x200/eeeeee" />

Надеюсь понятно

РЕДАКТИРОВАТЬ: В основном я хочу, чтобы изображение вело себя как контейнер, без использования «фонового изображения»

html
css
twitter-bootstrap
адаптивный дизайн

Оберните изображение и заголовок в div с положением : относительный , как в этой Fiddle

html

 
    <дел>
        <дел>
            Некоторый текст

CSS

 .col-lg-3{
    ширина: 25%;
    минимальная ширина: 230 пикселей;
    плыть налево;
    положение: родственник;
    минимальная высота: 1px;
    отступ слева: 15px;
    отступ справа: 15px;
    цвет фона: #ааа;
    выравнивание текста: по центру;
}
.col-lg-3 изображение {
    максимальная ширина: 100%;
}
. img-контейнер {
    отображение: встроенный блок;
    положение: родственник;
}
.позиционирование{
    положение: абсолютное;
    справа: 15 пикселей;
    внизу: 22px;
    цвет фона: красный;
    белый цвет;
    отступ: 4px;
    размер шрифта: 17px;
    высота строки: 18px;
}