Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

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

On

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

By alexxlab

Содержание

css вписать картинку в div


На чтение 4 мин. Просмотров 131 Опубликовано

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
9.0+1.0+9.5+3.0+3.6+2.1+1.0+

Краткая информация

Значение по умолчаниюauto
НаследуетсяНет
ПрименяетсяКо всем элементам
Ссылка на спецификациюhttp://www.w3.org/TR/css3-background/#the-background-size

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Масштабирует фоновое изображение согласно заданным размерам.

Синтаксис

background-size: [ | | auto ] | cover | contain

Значения

Если установлено одно значение, оно задает ширину фона, второе значение принимается за auto . Пропорции картинки при этом сохраняются. Использование двух значений через пробел задает ширину и высоту фоновой картинки.

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Браузеры

Safari до версии 4.1 и Chrome до версии 3.0 используют нестандартное свойство -webkit-background-size .

Opera до версии 10.53 использует нестандартное свойство -o-background-size .

Firefox до версии 4.0 использует нестандартное свойство -moz-background-size .

есть div размером 1:1, 1:2, 2:1, 2:2, короче квадрат, большой квадрат, вертикальный блок и горизонтальный блок. Есть картинка непредсказуемого размера, т.е. может быть вертикальной, может горизонтальной. Картинка в этот div вставляется через img и надо сделать так, чтобы картинка уменьшалась/увеличивалась пропорционально до размеров div и заполняла его весь и центровалась. без полей по бокам или сверху снизу.
сделать это если картинку пихать из css бекграундом и background-size:cover; — получилось, но надо сделать через img

зы. бекграунд и background-size:cover не подходят ибо через js идет рендом картинки при загрузке и смена её по времени. хочется сделать красиво и элегантно.

благодарю и буду рад если поможете.

  • Вопрос задан более трёх лет назад
  • 36109 просмотров

с помощью такого трюка можно такое реализовать
aspect ratio

Имеется некий div с классом .img-container и внутри картинка.

Истинные размеры картинки — могут быть любые. Внимание! Вопрос.

Как сделать так чтобы картинка вписывалась в размер DIV по ширине и высоте, и пропорционально увеличивалась или уменьшалась, если DIV будет менять размеры (а он будет менять размеры)?

Аналог на CSS для DIV:

9 ответов 9

вот пример когда контейнер ресайзится в результате ресайза окна

если хотите без jQuery, это реально, но делайте сами 🙂

Попробуйте сделать так:

Обновление

Если не получится, попробуйте так

Средствами CSS это сложно реализовать (попробуйте в мой пример у .img-container в height подставить 300px; ). Можно попробовать с пом. ajax вычислять широту и высоту контейнера и отдавать параметры картинке img.

Думаю тут проще было бы все сделать через background:

А ларчик то просто открывается.

И будут у вас ВСЕ картинки на сайте подгоняться под размер вашего дива. Хоть со старта, хоть при таскании ширины/высоты окна браузера. И это применимо ко всему. Хоть картинка, хоть видео, хоть ещё что-то, что придумаете. Учите цсс и хтмл, прежде чем заниматься жабой.

Если хочешь добавить адаптивность, еще один блок выше создай, сделай его flex, задай атрибут flex-wrap: wrap

Если через CSS, у тебя div с определенным классом, присвой картинке этот же класс, у тебя получится картинка такой же формы что и тот div в который ты ее «запихиваешь». И как раз таки при изменении параметров div’a этого класса, картинка будет тоже изменяться (увеличишь div в двое, то и картинка увеличится в двое). Так что если все грамотно сделать через классы, то это должно тебе помочь. Это мое субъективное мнение и как вариант помочь решить твою «проблему»

.img-container img Собсно все.
По просьбе дополняю: если размеры блока заданы жестко, мы можем использовать height: 100%;Свойство object-fit аналог background-size для замещаемых элементов https://developer.mozilla.org/ru/docs/Web/CSS/object-fit

Защищён участником Дух сообщества ♦ 19 ноя ’17 в 21:02 .

Благодарим вас за интерес, проявленный к этому вопросу. Так как он собрал большое количество ответов низкого качества и спама, который пришлось удалить, для публикации ответов теперь необходимо иметь 10 баллов репутации на сайте (бонус за ассоциацию учётных записей не учитывается).

Может быть, вы захотите ответить на один из неотвеченных вопросов?

Как сделать одинаковые размеры картинок в списках, галереях без создания миниатюр за счет css

Проблема многих вебмастеров при создании галерей, списков изображений или при выводе миниатюр картинок товара заключается в соблюдении одинаковых пропорций. Согласитесь приятно смотреть на миниатюры одинаковых пропорций, чем если бы они были вразнобой.

Обычно я решал данную проблему через overflow: hidden; и div, на который устанавливал ограничение по высоте картинок. Подробнее расскажу чуть позже. Сначала давайте поэтапно рассмотрим разные возможности по созданию миниатюр картинок одинакового размера от худшего к лучшему.

Итак, предположим у нас есть галерея в два ряда по три картинки в каждой. Все картинки по высоте и ширине разного размера, а нам нужно, чтобы миниатюрки были одинаковые. Сделаем это через css. Живую демонстрацию и скачать исходник вы можете внизу урока.

Вариант 1 (исходный)

<style>
.gallery1 { overflow: hidden; width: 480px;}
.gallery1 .ramka { float: left; margin-right: 10px; margin-bottom: 10px;}
.gallery1 img { width: 150px; }
</style>

<div>
<div><img src=»images/001_t.jpg» /></div>
<div><img src=»images/002_t.jpg» /></div>
<div><img src=»images/003_t.jpg» /></div>
<div><img src=»images/004_t.jpg» /></div>
<div><img src=»images/005_t.jpg» /></div>
<div><img src=»images/006_t.jpg» /></div>
</div>

Выглядело бы это все так:

 

Здесь каждая картинка обернута в div с классом ramka на который назначено свойство выравнивать картинки по левому краю. А в картинках .gallery1 img назначен размер по ширине 150px. Так как высота не указана, то она грузится исходной, чтобы не искажать пропорции картинок. Почему при таком способе все ряды съехали — именно из-за того, что высота картинок всегда разная. Этот способ не подходит.

Вариант 2 (с заданием принудительных пропорций картинок)

<style>
.gallery2 { overflow: hidden; width: 480px;}
.gallery2 .ramka { float: left; margin-right: 10px; margin-bottom: 10px;}
.gallery2 img { width: 150px; height: 150px; }
</style>

<div>
<div><img src=»images/001_t.jpg» /></div>
<div><img src=»images/002_t.jpg» /></div>
<div><img src=»images/003_t.jpg» /></div>
<div><img src=»images/004_t.jpg» /></div>
<div><img src=»images/005_t.jpg» /></div>
<div><img src=»images/006_t.jpg» /></div>
</div>

Чтобы ряды с картинками не разъезжались в этом примере мы задали принудительную высоту и ширину каждой картинке. В результате чего картинки стали с искаженными пропорциями.

Вариант 3 (с заданием нужных пропорций картинок и обрезкой по высоте)

<style>
.gallery3 { overflow: hidden; width: 480px; }
.gallery3 .ramka { float: left; margin-right: 10px; margin-bottom: 10px; width: 150px; height: 150px; overflow: hidden;}
.gallery3 img { width: 100% }
</style>

<div>
<div><img src=»images/001_t.jpg» /></div>
<div><img src=»images/002_t.jpg» /></div>
<div><img src=»images/003_t.jpg» /></div>
<div><img src=»images/004_t.jpg» /></div>
<div><img src=»images/005_t.jpg» /></div>
<div><img src=»images/006_t.jpg» /></div>
</div>

Это один из лучших способов приведения картинок под один формат. Я его использовал до сегодняшнего дня, пока не узнал о свойстве object-fit. Посмотрите на .gallery3 .ramka — здесь теперь overflow: hidden; который ограничивает размеры дива указанные в нем на 150x150px. В картинке задана ширина на 100%.

За счет этого метода все что выходит из дива больше, чем на 150px будет обрезаться. Не смотря на то, что скриншот галереи выглядит невзрачным, — это сделано специально, чтобы показать недостаток метода. Чтобы галерея была более приятной, нужно в диве ограничить высоту, например, на 100px, тогда все картинки без искажений будут в одном размере. Но минусом будет то, что картинки с очень большой высотой обрежутся снизу.

Вариант 4 (с заданием нужных пропорций картинок за счет object-fit: cover;)

<style>
.gallery5 { overflow: hidden; width: 480px;}
.gallery5 .ramka { float: left; margin-right: 10px; margin-bottom: 10px;}
.gallery5 img { width: 150px; height: 150px; object-fit: cover; }
</style>

<div>
<div><img src=»images/001_t.jpg» /></div>
<div><img src=»images/002_t.jpg» /></div>
<div><img src=»images/003_t.jpg» /></div>
<div><img src=»images/004_t.jpg» /></div>
<div><img src=»images/005_t.jpg» /></div>
<div><img src=»images/006_t.jpg» /></div>
</div>

Этот пример идеально демонстрирует, как создавать в html галерею с одинаковыми миниатюрами. Посмотрите в код на .gallery5 img — теперь здесь указаны нужные нам размеры миниатюр и свойство object-fit: cover; которое делает «обрезку» фоток на лету. Картинки «обрезаться» по центру без искажений.

ps

Размеры можно задавать и так (к диву, а картинка по 100%)
.gallery5 .ramka {float: left;margin-right: 10px;margin-bottom: 10px;width: 150px;height: 150px;
.gallery5 img {width: 100%; height: 100%; object-fit: cover;}

У свойства object-fit есть несколько параметров.

fill — масштабируется с сохранением пропорций, но с искажениями (как вариант 2).
contain — элемент масштабируется так, чтобы вместиться в элемент без искажений и обрезки
cover — картинка масштабируется (уменьшается или увеличивается) так, чтобы полностью вместиться в область без искажений (как вариант 4).

Надеюсь этот урок поможет вам легко создавать красивые миниатюры картинок одинакового размера, без предварительной обработки изображений.

 

Читайте также

blogprogram.ru | 2017-01-20 | Как сделать одинаковые размеры картинок в списках, галереях без создания миниатюр за счет css | Проблема многих вебмастеров при создании галерей, списков изображений или при выводе миниатюр картинок товара заключается в соблюдении одинаковых проп | https://blogprogram.ru/wp-content/uploads/2016/09/3213123-131×131.jpg

html — Как вписать изображение в CSS-сетку без растяжения

Проблема: IMG растягивает css-сетку, и я хочу, чтобы изображение уменьшилось и вписалось в сетку.

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

.grid-container {
display:grid;
grid-template-areas:
"nav_bar"
"main"
"about"
"port_over"
"resu_proj"
"links";
background-color: #161616;
grid-row-gap: 5em;
}

/*Nav bar grid*/
.nav_bar {
    display: grid;
    grid-area: nav_bar;
    grid-template-areas: "nav_img nav_links nav_links nav_links";
}

/*Nav bar img*/
.nav_img {
    grid-area: nav_img;
    object-fit: cover;

    background-color: grey;
}
<div>
     <div>

     <img src="./MLW_IMAGES/M.L.W logo.png">


     <div>
          <nav>
             <a href="/index.html#about">About</a>
             <a href="/index.html#portfolio">Portfolio</a>
             <a href="/index.html#contact">Contact</a>
          </nav>
     </div>
     </div>
...
</div>

1

Martin

4 Сен 2019 в 08:05

2 ответа

Лучший ответ

Возьмите один класс только для изображения. Присвойте конкретную высоту и ширину классу изображения и дайте ниже CSS для изображения.

.class-name img{
  max-width: 100%;
  min-height: 100%;
  min-width: 100%;
  max-width: 100%;
  object-fit: cover;
}

2

Meghna Bhuptani
4 Сен 2019 в 05:14

Вы можете попробовать установить max-height и max-width и указать ширину, которую вы хотите, чтобы изображение получало, если размер изображения больше. это то, что вы ожидаете?

.grid-container {
display:grid;
grid-template-areas:
"nav_bar"
"main"
"about"
"port_over"
"resu_proj"
"links";
grid-row-gap: 5em;
}

/*Nav bar grid*/
.nav_bar {
    display: grid;
    grid-area: nav_bar;
    grid-template-areas: "nav_img nav_links nav_links nav_links";
}

/*Nav bar img*/
.nav_img {
    grid-area: nav_img;
    object-fit: cover;

    background-color: grey;
}
img
{
max-height:100px;
max-width:100px;
}
<div>
     <div>

     <img src="https://dummyimage.com/50x50/000/fff">


     <div>
          <nav>
             <a href="/index.html#about">About</a>
             <a href="/index.html#portfolio">Portfolio</a>
             <a href="/index.html#contact">Contact</a>
          </nav>
     </div>
     </div>
...
</div>

0

XxSTREKxX
5 Сен 2019 в 03:50

Адаптивные изображения с помощью CSS – Dobrovoimaster

В этом небольшом уроке, мы рассмотрим простейшие способы создания адаптивных изображений с помощью CSS.
Существует не мало различных решений сделать изображения адаптивными, все они различаются и по сложности, и степени поддержки браузерами. Примером сложного пути реализации адаптивных картинок, является использование атрибута srcset, для которого требуется несколько изображений, больше разметки, а также зависимость от поддержки браузерами.

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

Приготовил примеры нескольких вариаций исполнения адаптивных изображений, одиночная картинка, изображения в двух и более колонках, а так же пример использования большого фонового изображения с гарантированной адаптивностью. Все варианты основаны на использовании процентных значений для свойства width(ширины) и значении auto для свойства height (высоты) изображений.

img {
  width: 100%;
  height: auto;
}

img { width: 100%; height: auto; }

Базовые значения адаптивного изображения

Начнём с рассмотрения базового примера, когда нам необходимо сделать одиночные картинки используемые в записях, или других отдельных блоках, полностью адаптивными.
Например, у нас есть контейнер, которому мы задали базовую ширину width: 96%; и выставили максимальную ширину в max-width: 960px;, в этом блоке нам необходимо вывести адаптивное изображение.
Для этого элементу <img> внутри контейнера определяем ширину в 100%, так, что его ширина всегда будет равна ширине контейнера, независимо от размера области просмотра. Высоту, соответственно, переводим в автоматический режим, в итоге изображение будет изменяться пропорционально.

HTML:

<div>
  <img src="image01.jpg" />
</div>

<div class=”container”> <img src=”image01.jpg” width=”960″ height=”640″ /> </div>

CSS:

div.container {
  width: 96%;
  max-width: 960px;
  margin: 0 auto; /* центрируем основной контейнер */
}
img {
  width: 100%; /* ширина картинки */
  height: auto; /* высота картинки */
}

div.container { width: 96%; max-width: 960px; margin: 0 auto; /* центрируем основной контейнер */ } img { width: 100%; /* ширина картинки */ height: auto; /* высота картинки */ }

Обратите внимание, что <img> элемент будет адаптивным, даже если были заданы фиксированные значения HTML-атрибутов ширины и высоты непосредственно в разметке.

Адаптивные изображения в колонках

Иногда мы хотим видеть изображения выстроенные в ряд бок о бок, или например, в виде сетки, для организации простейшей галереи картинок.
Для этого, необходимы лишь внести небольшие изменения в код, который использовали выше, первое, это уменьшить ширину свойство width и задать элементу <img> значение inline-block для свойства display, т.е. сделать его встроенным.
Давайте рассмотрим две компоновочные схемы: расположение картинок в две колонки и макет из трёх столбцов.

1. Макет изображений в две колонки
Для двух-колоночного макета изображений, мы можем установить ширину в 48%, или примерно половину контейнера. Не устанавливаем значения в 50%, для того, чтобы были боковые отступы.

HTML:

<div>
  <img src="image01.jpg" />
  <img src="image02.jpg" />
</div>

<div class=”container”> <img src=”image01.jpg” width=”960″ height=”640″ /> <img src=”image02.jpg” width=”960″ height=”640″ /> </div>

CSS:

img {
  width: 48%;
  display: inline-block;
}

img { width: 48%; display: inline-block; }

2. Три колонки изображений

С трёх-колоночным макетом концепция та же, необходимо распределить ширину базового контейнера на три картинки, для этого достаточно установить значения ширины изображений около одной трети ширины контейнера: 32%.

HTML:

<div>
  <img src="image01.jpg" />
  <img src="image02.jpg" />
  <img src="image03.jpg" />
</div>

<div class=”container”> <img src=”image01.jpg” width=”960″ height=”640″ /> <img src=”image02.jpg” width=”960″ height=”640″ /> <img src=”image03.jpg” width=”960″ height=”640″ /> </div>

CSS:

img {
  width: 32%;
  display: inline-block;
}

img { width: 32%; display: inline-block; }

Условная расстановка адаптивных изображений

В следующем примере, мы рассмотрим вариант использования адаптивных картинок с различной расстановкой в зависимости от устройств просмотра, т.е. при просмотре на смартфонах изображения будут отображаться в одну колонку, в две колонки на планшетах, и выстраиваться в четыре колонки на больших экранах.
Для реализации задуманного, применим медиа-запросы @media, указав тип носителя, для которого будет применяться то или иное максимальное значение ширины изображений max-width.

HTML:

<div>
  <img src="image01.jpg" />
  <img src="image02.jpg" />
  <img src="image03.jpg" />
  <img src="image04.jpg" />
</div>

<div class=”container”> <img src=”image01.jpg” width=”960″ height=”640″ /> <img src=”image02.jpg” width=”960″ height=”640″ /> <img src=”image03.jpg” width=”960″ height=”640″ /> <img src=”image04.jpg” width=”960″ height=”640″ /> </div>

CSS:

/* Для небольших устройств (смартфоны) */
img {
  max-width: 100%;
  display: inline-block;
}
/* Для средних устройств (планшеты) */
@media (min-width: 420px) {
  img {
    max-width: 48%;
  }
}
/* Для больших устройств (ноуты, пк) */
@media (min-width: 760px) {
  img {
    max-width: 24%;
  }
}

/* Для небольших устройств (смартфоны) */ img { max-width: 100%; display: inline-block; } /* Для средних устройств (планшеты) */ @media (min-width: 420px) { img { max-width: 48%; } } /* Для больших устройств (ноуты, пк) */ @media (min-width: 760px) { img { max-width: 24%; } }

Всё довольно просто, неправда ли? Идея с медиа-запросами отличная, уже довольно давно и широко используемая. Показанные в примере параметры, хорошо работают именно с данным макетом, как поведут себя в других конструкциях, стоит тщательно проверять, так что…

Адаптивное изображение на всю ширину экрана

Для того, чтобы сделать широко-форматные адаптивные изображения, которые заполняют 100% размера окна просмотра, необходимо просто удалить свойство максимальной ширины контейнера max-width (значение в 960px) и установить ему ширину width в 100%. Ширина изображения, так же выставляется в значение 100%.

CSS:

.container {
  width: 100%;
}
img {
  width: 100%;
}

.container { width: 100%; } img { width: 100%; }

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

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

Источник: sixrevisions
Надеюсь буржуинский автор не будет на меня в обиде за столь вольный перевод)))

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

FAQ: Как сделать круглый div / круглое фото?

Открыл недавно метрику на своем старом сайте, а на него есть несколько переходов с поисковиков. Посмотрел историю поисковых запросов и удивился, почти каждый день есть несколько посещений по запросам “как сделать круглый div”, “как сделать круглое фото” и подобное. Оказывается многих интересует подобный вопрос, так давайте же разберем его.

Чтобы сделать круглый блок, необходимо воспользоваться CSS-свойством border-radius и задать ему значение 50%, то есть округлить каждый угол на половину ширины/высоты. В результате мы получим такое:

Как видим, мы получили почти круг, а почти, потому, что округление мы применили к прямоугольному блоку, чтобы получился красивый, правильный круг, необходимо прямоугольник превратить в квадрат, для этого блоку задаем одинаковую высоту и ширину:

Готовый код:

<div></div>
  • CSS (правила для скругления)
.circle {
    width: 100px; /* задаете свои размеры */
    height: 100px;
    border-radius: 50%;
    /* не забываем о кроссбраузерности */
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -khtml-border-radius: 50%;
}

Код для вывода красивых аватаров пользователей с использованием теней и рамок.

<div>
    <img src="путь_к_файлу" alt="" />
</div>
.circle {
    width: 100px; /* задаете свои размеры */
    height: 100px;
    overflow: hidden;
    background: #fff;
    padding: 5px; /* создание отступов */
    border-radius: 50%;
    /* не забываем о кроссбраузерности */
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border: #aaa 1px solid;
    box-shadow: 0px 1px 1px 1px #bbb; /* тень */
    -moz-box-shadow: 0px 1px 1px 1px #bbb;
    -webkit-box-shadow: 0px 1px 1px 1px #bbb;
}
.circle img {
    display: block;
    width:100%;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}

 

В результате получаем такие картинки

Адаптивное изображение на CSS

С развитием информационных технологий все больше адаптивности требуется от создаваемых сайтов. Адаптивность, собственно заключается в возможности сайта подстраиваться под мобильные телефоны и планшеты. При этом некоторые создаются специальные – мобильные версии сайтов. Но все более популярным становиться создания таких сайтов, которые сами перестраиваются под мобильную версию.

Часто у разработчиков возникает следующая проблема. Сайт адаптивной и подстраивается под разрешение экрана в мобильных телефонах, но вот проблема – изображения в статье не желают уменьшатся, а вылезают за область просмотра. Это является, во-первых, не удобным для пользователя, а во-вторых указывает на погрешности в разработке, ну и, естественно, на сам статус сайта и разработчика. Ведь все представление складывается из мелочей.

Итак, как решить эту проблему средствами каскадных таблиц стилей – CSS.

Вариант 1. Работает только на отдельных изображениях.

В CSS файле создать класс img-adaptive со следующими параметрами:

.css-adaptive {
display: block;
max-width: 100%;
height: auto;
}

Далее, при вставке изображения нужно подставить это класс:

<img src=”images/1.jpg” class=”css-adaptive”>

При этом изображение пудет подстраиваться под ширину блока в которое оно помещается. Но этот способ работает только на те изображения, в которые подставляется класс css-adaptive.

Вариант 2. Работает на все изображения в определенном блоке.

Допустим на вашем новом сайте публикуются новости. В каждую новость добавляется по несколько изображений. При этом все должны подстраиваться под размер экрана. А прописывать класс img-adaptiveдля каждого, во-первых, долго, а во-вторых, если новости добавляют обычные пользователи, то они просто не будут знать про этот класс.

Итак, нужно поместить все новости в контейнер div например с классом news.

<div class=”news”>
<h2>Адаптивность изображений в CSS</h2>
<img src=”imahes/1.jpg”>
<img src=”imahes/2.jpg”>
<img src=”imahes/3.jpg”>
</div>

А в файл с CSS следующее:

.news img {
display: block;
max-width: 100%;
height: auto;
}

Таким образом все изображения в новости станут адаптивными независимо от их количества и размера.

Поделиться в соц. сетях:

Вписываем картинку в контейнер используя серверный код PHP

Задача возникла, когда делал клиенту сайт с электронным магазином. Картинки товаров на страницах должны выводиться единообразно; сам же клиент имеет картинки всех возможных размеров и пропорций. Чтобы освободить его от редактирования изображений, было решено вписывать их в контейнер — блок <div> фиксированного размера, обрамленный рамкой. Вытянутые по горизонтали имиджи вписываться будут по ширине, вытянутые по вертикали — соответственно, по высоте. Сами изображения должны быть кликабельны.

В принципе, задача довольно типичная и имеет существующие варианты решений, например, только через CSS-стили. Однако, когда в руках такое мощное оружие как серверный код, грех им не воспользоваться, когда ты сам не дизайнер, а программер. Поэтому я написал функцию, охватывающую все возможные соотношения сторон контейнера и вписываемого изображения. Ее и предлагаю на суд общественности.

Назовем нашу функцию out_adjusted_link_image. Ее определение будет иметь такой вид:

function out_adjusted_link_image($img_file, $img_alt, $img_title,
                                 $a_href, $div_wd, $div_ht,
                                 $div_more_style = '', $a_more = '')

Параметры:

Имя

Тип

Описание

$img_file

string

путь и имя файла изображения

$img_alt, $img_title

string

атрибуты alt и title тега имиджа

$a_href

string

URL, открываемый по клику на картинке

$div_wd, $div_ht

int

ширина и высота контейнера

$div_more_style

string

дополнительные атрибуты CSS-стиля контейнера (опционально)

$a_more

string

дополнительные атрибуты тега анкора (опционально)

Возвращаемое функцией значение — строка, содержащая HTML-скрипт нашей конструкции контейнер — линк — имидж.

Строим тело функции. Пошагово:

1. Определяем константы, задающие оба измерения, по которым будем вписывать:

define('ALIGN_BY_WD', 0);
define('ALIGN_BY_HT', 1);

2. Выясняем размеры имиджа. Для этого воспользуемся функцией getimagesize(). В качестве параметра эта функция требует имя файла образа, включая путь к нему. Возвращает она массив из 7 элементов, из которых нас интересуют первые 2 (т. е. с индексами 0 и 1), содержащие соответственно ширину и высоту имиджа.

$size = getimagesize($img_file);
$img_wd = $size[0];
$img_ht = $size[1];

3. Определяем, по какому измерению вписывать. Если контейнер более «сплющен» по вертикали, чем имидж, то после подгонки по размеру имидж впишется по высоте, в обратном случае — по ширине. Данная логика реализуется следующим фрагментом кода PHP:

if ($div_wd / $div_ht > $img_wd / $img_ht)
  $align = ALIGN_BY_HT;
else
  $align = ALIGN_BY_WD;

Частный случай равенства пропорций обоих прямоугольников, когда выравнивать можно по любому измерению, обрабатывается в блоке else.

4. Вписываем нашу картинку в контейнер. Для этого вычисляем ширину и высоту вписанного имиджа — $new_img_wd и $new_img_ht. Для последующего центрирования определяем также переменные $rel_edge и $abs_edge — края для относительного и абсолютного позиционирования по соответствующим измерениям, и $new_img_dim — размер, который будем использовать для установки отступа. Присваиваем им значения в соответствии с направлениями выравнивания.

if ($align == ALIGN_BY_HT) {
  $new_img_ht = $div_ht;
  $new_img_wd = $new_img_ht * $img_wd / $img_ht;
  $rel_edge = 'left';
  $abs_edge = 'top';
  $new_img_dim = $new_img_wd;
}
else {
  $new_img_wd = $div_wd;
  $new_img_ht = $new_img_wd * $img_ht / $img_wd;
  $rel_edge = 'top';
  $abs_edge = 'left';
  $new_img_dim = $new_img_ht;
}

5. Центрируем имидж. Вписанный по ширине — по вертикали, вписанный по высоте — по горизонтали. Для этого используем технику выравнивания, описанную в предыдущей статье. Помещаем искомую строку стиля в переменную $img_style:

$img_style = 'position:absolute; ' . $rel_edge . ':50%; width:' .
             $new_img_wd . 'px; height:' . $new_img_ht . 'px; margin-' .
             $rel_edge . ':-' . ($new_img_dim / 2) . 'px; ' .
             $abs_edge . ':0';

Теперь можно выстроить всю конструкцию контейнер — анкор — имидж, строку с которой и будет возвращать наша функция:

return '<div><a href="' . $a_href . '" '. $a_more .
       '><img src="' . $img_file . '" alt="' . $img_alt . '" title="' .
       $img_title . '" /></a></div>';

Вот как она (конструкция то бишь) выглядит в браузере:

Достигли ли мы желаемого результата? Не совсем. Попробуйте навести курсор на наш блок и убедитесь, что поля между имиджем и границами контейнера не попадают в ссылку. Чтобы ссылка охватывала весь блок, сделаем следующее:

  1. Наш вписанный и отцентрированный имидж расположим перед анкором ссылки.

  2. Вместо него внутрь анкора поместим прозрачный PNG-имидж, размеры которому зададим равными размерам контейнера.

Таким образом, наша картинка перекроется прозрачным имиджем и останется видимой. Зона же действия линка растянется до границ контейнера.

Модифицированный фрагмент кода, возвращающий значение функции, примет следующий вид:

return '<div><img src="' . $img_file . '" /><a href="' . $a_href . '" '. $a_more .
       '><img src="images/Transparent.png" alt="' .
       $img_alt . '" title="' . $img_title . '" .
       $div_wd . '" . $div_ht .
       '" /></a></div>';

Наведите курсор теперь и почувствуйте разницу:

Собрав воедино все вышеприведенные части кода, получим функцию в окончательном виде:

function out_adjusted_link_image($img_file, $img_alt, $img_title,
                                 $a_href, $div_wd, $div_ht,
                                 $div_more_style = '', $a_more = '') {
  define('ALIGN_BY_WD', 0);
  define('ALIGN_BY_HT', 1);
 
  $size = getimagesize($img_file);
  $img_wd = $size[0];
  $img_ht = $size[1];
 
  if ($div_wd / $div_ht > $img_wd / $img_ht)
    $align = ALIGN_BY_HT;
  else
    $align = ALIGN_BY_WD;
 
  if ($align == ALIGN_BY_HT) {
    $new_img_ht = $div_ht;
    $new_img_wd = $new_img_ht * $img_wd / $img_ht;
    $rel_edge = 'left';
    $abs_edge = 'top';
    $new_img_dim = $new_img_wd;
  }
  else {
    $new_img_wd = $div_wd;
    $new_img_ht = $new_img_wd * $img_ht / $img_wd;
    $rel_edge = 'top';
    $abs_edge = 'left';
    $new_img_dim = $new_img_ht;
  }
 
  $img_style = 'position:absolute; ' . $rel_edge . ':50%; width:' .
               $new_img_wd . 'px; height:' . $new_img_ht . 'px; margin-' .
               $rel_edge . ':-' . ($new_img_dim / 2) . 'px; ' .
               $abs_edge . ':0';
 
  return '<div><img src="' . $img_file . '" /><a href="' . $a_href . '" '. $a_more .
         '><img src="images/Transparent.png" alt="' .
         $img_alt . '" title="' . $img_title . '" .
         $div_wd . '" . $div_ht .
         '" /></a></div>';
}

Пример вызова функции. Именно он рендерит в вашем браузере эту милую вписанную в кликабельный квадрат мартышку:

echo out_adjusted_link_image('images/monkey.jpg', 'Monkey', 'Monkey',
                    '#anchor', 200, 200,
                    'left:50%; margin-left:-100px', 'target="_blank"');

Здесь еще и сам контейнер отцентририрован по горизонтали внутри своего собственного родительского блока все по той же методике.

В одной из последующих статей я планирую описать, как я встроил приведенный здесь код в содержимое материала сайта на Joomla.

Как с помощью CSS автоматически изменить размер изображения, чтобы оно соответствовало контейнеру div?

Чтобы автоматически изменить размер изображения или видео, чтобы они поместились в контейнер Div, используйте свойство object-fit. Он используется для указания того, как изображение или видео помещается в контейнер.

свойство соответствия объекта: Это свойство используется, чтобы указать, как изображение или видео изменяются и вписываются в контейнер. Он сообщает содержимому, как поместиться в конкретный контейнер div различными способами, например, сохранить это соотношение сторон или растянуть и занять как можно больше места.

Вниманию читателя! Не прекращайте учиться сейчас. Освойте все важные концепции HTML с помощью Web Design for Beginners | Курс HTML .

  • Пример 1: В этом примере описывается автоматическое изменение размера изображения по размеру контейнера Div. Этот пример не содержит свойства объектного соответствия.

    < html >

    < головка >

    < стиль >

    .вундеркинды {

    ширина: 60%;

    высота: 300 пикселей;

    }

    img {

    ширина: 100%;

    высота: 100%;

    }

    стиль >

    головка >

    < корпус 3 > 9000

    < div class = «компьютерщики» >

    < img src =

    alt = "Geeks Image" />

    div >

    body >

    html >

    Выход:

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

  • Пример 2: Этот пример используется для отображения части изображения при использовании изменения размера контейнера div.

    < html >

    < головка >

    < стиль >

    .geeks {

    ширина: 60%;

    высота: 300 пикселей;

    }

    img {

    ширина: 100%;

    высота: 100%;

    объект: крышка;

    }

    стиль >

    головка >

    < корпус 3 > 9000

    < div class = «гики» >

    < img src =

    alt = "Geeks Image" />

    div >

    body >

    html >

    Выход:

    Примечание : Использование object-fit: крышка; обрежет края изображения, сохранив соотношение сторон, а также заполнит пространство.

  • Пример 3: В этом примере изображение отображается без использования свойства «подогнать под объект». В этом примере размер изображения устанавливается вручную, и изображение не сможет поддерживать свое соотношение сторон и регулировать или изменять размер в соответствии с контейнером div при изменении размера окна браузера.

    < html >

    < голова >

    <

    0 стиль

    9 9002 922 9000 body {

    выравнивание текста: по центру;

    }

    img {

    width: 400px;

    высота: 200 пикселей;

    }

    стиль >

    головка >

    < корпус >

    2

    2 < img src =

    alt = "Geeks Image" >

    body >

    html >

    Вывод:

  • Пример 4: В этом примере отображается часть изображения или изображения с использованием свойства «подогнать объект».В этом примере размер изображения устанавливается вручную, а также используется свойство подгонки объекта. В этом случае при изменении размера браузера изображение сохранит свое соотношение сторон и не будет изменено в соответствии с контейнером div.

    < html >

    < голова >

    < стиль >

    тело {

    выравнивание текста: по центру;

    }

    img {

    width: 400px;

    высота: 200 пикселей;

    объект подходит: крышка;

    }

    стиль >

    головка >

    < корпус 3 > 9000

    < img src =

    alt = "Geeks Image" >

    body >

    html >

    Вывод:

    Примечание: Свойство объект подходит: крышка; обрежет края изображения, сохранив соотношение сторон, а также заполнит пространство.

HTML - это основа веб-страниц, используется для разработки веб-страниц путем структурирования веб-сайтов и веб-приложений. Вы можете изучить HTML с нуля, следуя этому руководству по HTML и примерам HTML.

CSS - это основа веб-страниц, используется для разработки веб-страниц путем стилизации веб-сайтов и веб-приложений. Вы можете изучить CSS с нуля, следуя этому руководству по CSS и примерам CSS.

Соответствие объекта CSS Свойство

Свойство CSS подгонка объекта используется, чтобы указать, как
Размер или

Свойство соответствия объекта CSS

Свойство CSS object-fit используется для указания того, как или

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

Посмотрите на следующее изображение из Парижа. Это изображение имеет ширину 400 пикселей и высоту 300 пикселей:

Однако, если мы стилизуем изображение выше на половину его ширины (200 пикселей) и
такой же высоты (300 пикселей), это будет выглядеть так:

Мы видим, что изображение сжимается, чтобы поместиться в контейнер размером 200x300 пикселей.
(его исходное соотношение сторон уничтожено).

Вот где появляется свойство object-fit
дюйм. Свойство подгонки объекта может принимать одно из
следующие значения:

  • заливка - это значение по умолчанию. Размер изображения изменяется, чтобы заполнить
    данное измерение. При необходимости изображение будет растянуто или сжато, чтобы соответствовать

    • .

  • содержат - Изображение
    сохраняет свое соотношение сторон, но его размер изменяется в соответствии с заданным размером
  • крышка - Изображение сохраняет свое соотношение сторон
    и заполняет данное измерение.Изображение будет обрезано по размеру
  • нет - Размер изображения не изменен
  • в уменьшенном масштабе - изображение
    уменьшено до самой маленькой версии нет или
    содержать

Использование объекта: крышка;

Если использовать object-fit: cover; изображение сохраняет свое соотношение сторон
и заполняет данное измерение. Изображение будет обрезано по размеру:

Использование object-fit: contain;

Если мы используем object-fit: contain; изображение
сохраняет свое соотношение сторон, но его размер изменяется в соответствии с заданным размером:

Использование подгонки объекта: заполнить;

Если мы используем object-fit: fill; изображение
изменен, чтобы заполнить заданный размер.При необходимости изображение будет
растянуты или сжаты, чтобы соответствовать:

Использование подгонки объекта: нет;

Если мы используем object-fit: none; изображение не
изменен размер:

Использование подгонки объекта: уменьшение масштаба;

Если мы используем object-fit: scale-down; изображение
уменьшено до самой маленькой версии нет или
содержать :

Пример

img {
width: 200px;
высота:
300 пикселей;
подгонка объекта: уменьшение;
}

Попробуй сам "

Другой пример

Здесь у нас есть два изображения, и мы хотим, чтобы они занимали 50% ширины окна браузера и 100% высоты.

В следующем примере мы НЕ используем , подогнанный под объект , поэтому, когда мы изменяем размер окна браузера, соотношение сторон изображений будет уничтожено:

В следующем примере мы используем object-fit: cover; , поэтому, когда мы изменяем размер окна браузера, соотношение сторон изображений
сохранилось:

Соответствие объектам CSS Другие примеры

В следующем примере демонстрируются все возможные значения свойства объектного соответствия .
в одном примере:

Пример

.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none { соответствие объекта: нет;}

Попробуй сам "

CSS Object- * Свойства

В следующей таблице перечислены свойства объекта CSS - *:

Имущество Описание
по объекту Определяет, как изменить размер или
объект-позиция Определяет, как или

объектно-подходящий | CSS-уловки

Свойство подгонки объекта определяет, как элемент реагирует на высоту и ширину своего поля содержимого.Он предназначен для изображений, видео и других встраиваемых мультимедийных форматов в сочетании со свойством object-position . Используемый сам по себе, object-fit позволяет нам обрезать встроенное изображение, давая нам детальный контроль над тем, как оно сжимается и растягивается внутри своего поля.

соответствие объекта может быть установлено с одним из следующих пяти значений:

  • заливка : это значение по умолчанию, при котором изображение растягивается до размеров поля содержимого, независимо от его соотношения сторон.
  • содержат : увеличивает или уменьшает размер изображения, чтобы заполнить поле, сохраняя его соотношение сторон.
  • обложка : изображение будет занимать высоту и ширину своего прямоугольника, снова сохраняя свое соотношение сторон, но часто в процессе обрезая изображение.
  • нет : изображение игнорирует высоту и ширину родительского элемента и сохраняет исходный размер.
  • в уменьшенном масштабе : изображение сравнивает разницу между нет и содержит , чтобы найти наименьший размер конкретного объекта.

Вот как мы можем установить это свойство:

  img {
  высота: 120 пикселей;
}

.крышка {
  ширина: 260 пикселей;
  объект подходит: крышка;
}

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

Стоит отметить, что по умолчанию изображение центрируется в пределах своего поля содержимого, но это можно изменить с помощью свойства object-position .

Демо

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

См. Подборку объекта «Перо» Робина Рендла (@robinrendle) на CodePen.

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

Похожие объекты

Другие ресурсы

Поддержка браузера

Стоит отметить, что iOS 8-9.3 и Safari 7-9.1 имеют свойство object-fit , но не object-position .

Настольный компьютер

Мобильный

Chrome Firefox IE Edge Safari
32 36 Нет 7999 10
Android Chrome Android Firefox Android iOS Safari
94 92 4.4,3-4,4,4 10,0-10,2

Fit Image в Div

Опубликовать ваши комментарии?

Как мне автоматически изменить размер изображения, чтобы оно соответствовало контейнеру div? Стек…

6 часов назад В настоящее время нет возможности сделать это правильно детерминированным способом, с изображениями фиксированного размера , такими как файлы JPEG или PNG. Чтобы пропорционально изменить размер изображения , вы должны установить высоту или ширину на «100%», но не то и другое одновременно.Если вы установите оба значения на «100%», ваше изображение будет растянуто.

Обзоры: 4

Веб-сайт: Stackoverflow.com