Css — Одинаковый размер картинок


Как изменять размеры изображения в css на html

Изображения — составляющие практически любого сайта, поэтому без изменения размера не обойтись. Изменять размер картинки можно 2 способами: в графическом редакторе или программно в коде html на css .

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

1. Изменение картинки в графическом редакторе

Изменять размер изображения вы можете в любом графическом редакторе(photoshop, gimp, xnview) и оно автоматически будет меняться на сайте в соответствии с оригинальными размерами.

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

— графические редакторы некачественно сжимают картинки менее 200 пикселей по ширине и высоте.

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

2. Изменение картинки в коде css на сайте

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

— Качественно сжимаются небольшие картинки, менее 200 пикселей по высоте или ширине в отличие от графических редакторов. Если вы хотите, чтобы на сайте размер изображения был меньше 200 пикселей, то лучше, чтобы исходный размер был больше на 30-50%(260-300 пикселей), чтобы сохранить хорошее качество при уменьшении.

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

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

Как изменить размер картинки в html с помощью css

Чтобы изменить размера изображения в html средствами css используются свойства width(ширина) и height(высота) внутри атрибута style. Вы можете написать только width или height , и оставшееся неуказанное значение автоматически изменится с сохранением пропорций картинки. Например, указав только ширину изображения с помощью width, его высота(height) изменится автоматически, сохранив пропорции. И наоборот, при указании только высоты(height), его ширина также автоматически поменяется, сохранив пропорции картинки.

Как изменить размер картинки в HTML

В этой статье мы поговорим о нескольких вариантах изменения размеров картинки в HTML. Для тех, кто только начинает изучать html будет полезно прочитать статью про вывод картинок на странице: HTML тег .

Изменять размер изображения полезно в нескольких случаях:

  • Браузер сможет сразу при загрузке страницы сделать правильный масштаб страницы и контент не будет прыгать. Например, все содержимое html-страницы уже загрузилось, а картинка пока еще нет. В этом случае после загрузки картинки она сместит весь контент ниже. Такое может происходить чаще всего с мобильных устройств, но в любом случае это будет выглядеть некрасиво.
  • Просто уменьшить размер картинки, поскольку ширина области не позволяет вывести такое большое изображение.

Для изменения размеров картинки html существует два способа:

  • Через атрибуты width и height в теге
  • Через свойства CSS width:N px и height:N px

В обоих случаях результат примера будет одинаковый: картинка будет 100 пикселей на 100 пикселей.

Если не задавать размеры изображения, то она будет выведена в тех размерах, какие есть. Также можно сказать, что если указаны размеры (или только один размер), то картинка будет в пропорции изменена до того размера, который указан. Например, изображение 500х300 пикселей. Если мы укажем ширину в 100 пикселей, то высота картинки изменится пропорционально и составит 60 пикселей (в 5 раз меньше).

Фото разных размеров, как сделать через css, вывод фото с одинаковыми пропорциям

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

Цукерберг рекомендует:  Swift Cocoapods Frameworks. Вебинар будет полезен начинающим программистам, которые наверняка

Сайт на кохане, допустим загружаем мы фото, все загрузилось, вставилось сам вывод фото можно изменить через css, но если .class img <366px; height: 250px;>задать размеры фотке то она будет искажаться, что не есть хорошо.

Как можно реализовать вот так, та часть что прозрачная прячиться. и показываем определенную часть которая задана через css по размерам width: 366px; height: 250px;

Читать что много есть вариантов.

Я реализовал так:

у самих фото размер сторон не ниже чем 500px, то есть ни одна сторона не ниже чем 500px

center — показывает центр фотографии заданным по параметрам
width: 366px;
height: 250px;

а сама фотка 500px на 600px или 500px на 500px

все отлично работает, но есть одно но, не показывает фото в фаерфоксе, в опере есть, в ie есть, в хроме есть.


Как все это выглядит:

Может как то по другому можно реализовать задачу ?

Вот еще вариант, но работает не ровно по центру и минус в том что бордер закруглены края не работает.

HTML: Изменение размера картинки

Если для картинки в HTML коде не указаны размеры, то браузер будет отображать её в естественном размере, но он не сможет определить размер до тех пор, пока картинка загружается и анализируется. Тем временем вероятно браузер уже скачал всю HTML-разметку и текст, а изображения будут появляться на своем месте только после их загрузки. Для размещения изображений после анализа их размера, браузер может перестраивать заново разметку, что может быть не приемлемо, если пользователь уже начал читать текст на странице. Для того, чтобы браузер заранее зарезервировал пространство нужного размера для отображения картинки можно воспользоваться атрибутами width (ширина картинки) и height (высота картинки) тега , в которых в качестве значений указываются ширина и высота картинки в пикселях без указания самой единицы измерения.

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

Если вы решили изменить размер картинки с помощью атрибутов width и height , то следует соблюдать пропорции между шириной и высотой картинки. Изменение пропорций размера картинки приведет к её деформации.

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

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

Я пытаюсь создать стену изображения, состоящую из фотографий продукта. К сожалению, все они имеют разную высоту и ширину. Как я могу использовать css, чтобы все изображения выглядели одинакового размера? предпочтительно 100 х 100.

Я думал о том, чтобы сделать div, который имеет высоту и ширину 100 пикселей, а затем некоторые, как заполнять его. Не уверен, как это сделать.

Как я могу это сделать?

Могу ли я просто добавить, что если вы слишком сильно искажаете свои изображения, то есть вынимаете их из соотношения, они могут выглядеть неправильно, — крошечная сумма в порядке, но один из способов сделать это — поместить изображения внутри ‘container’ и установите контейнер в 100 x 100, затем установите для вашего изображения значение переполнения none и установите минимальную ширину в максимальную ширину контейнера, это обрезает немного вашего изображения, хотя

Таким образом, изображение будет оставаться размером с его контейнером, но будет изменять размер без ограничений.

Как делать карточки товаров в каталоге одинакового размера с разной длиной заголовка и высотой картинки?

мне надо чтобы карточки товаров были ровно в ряд.
для этого я использую в настоящее время (для views с классом строки product ):
1. жестко заданную высоту блока картинки и сама картинка стилизована:
2. жестко заданную высоту поля текст

и это приводит к тому что в заголовок товара название помещается только 2 строки, а 3 или 4 становятся не видными.
как можно сделать резиновой высоту заголовка — и зависящей от него высоту картинки?

ровно в ряд — одинаковой высоты карточка товара, но не обязательно по ширине одинаковые

Ответы

Вообще это делается грамотной вёрсткой и разумеется разумной длиной заголовка и стандартными пропорциями картинок

тогда будет красяво!

Одинаковая ширина — это практически обязательное условие для красявости

Высота для блока товара обычно подгоняется min-height: ..0px
при тестировании — min-height корректируем

Если высота картинки фиксированная, то воспользуйтесь способом Сергея Чикуёнка.

Если высота картинки фиксированная, то воспользуйтесь способом Сергея Чикуёнка

честно говоря — ничего интересного

от одних display: inline; zoom: 1; и inline-block в тоску впасть можно. ))

единственно там он приводит ссылку на бигбази — и возможно там как раз и есть результат работы ксс -блоки действительно равные

от одних display: inline; zoom: 1; и inline-block в тоску впасть можно

:-) конечно тоскливо, но это единственный вариант (скрипты не считаем) сделать блок с резиновой высотой шапки и фиксированным подвалом, при том, что все подвалы будут находиться на одной высоте в строке, и еще сами блоки будут идти в строчку, и нормально переноситься на новую строку.
А display: inline и zoom: 1 для IE6+

единственно там он приводит ссылку на бигбази

Вы, видимо, не читали до конца? Внизу есть ссылка на пример: http://chikuyonok.ru/u/inline-va/

Цукерберг рекомендует:  Sql server - О проектировании базы данных

А, забыл уточнить, что ширина блоков тоже должна быть одинаковая, либо для разных блоков надо задавать разную ширину через ЦСС.

конечно тоскливо, но это единственный вариант (скрипты не считаем) сделать блок с резиновой высотой шапки и фиксированным подвалом

Тут надо мыслить глобально.


Ну нафик не нужны в блоке товара всякие там footer и header
автору захотелось чего-то сочинить — вот он и напридумывал сложностей для сюжета . ))

Пример из личной практики:
Блоки товаров идут плиткой, т.е. несколько строк товаров по 4-5 в строке в зависимости от ширины экрана.
Каждый блок состоял из картинки, названия, опций, цены и кнопки купить.
По дизайну все кнопки «Купить» должны были быть на одной линии в строке, а название, цена и опции, естественно были все разные по высоте.

мануал в студию

Не вижу проблем
кнопку «Купить» можно жёстко прижать к нижней границе блока товара
position:relative и т.п. — всегда поможет

впрочем, — чаще всего и без этого можно обойтись
просто надо понимать заранее: что в блоке товара выводить планируется

кнопку «Купить» можно жёстко прижать к нижней границе блока товара

Если известна высота блока или не надо «Купить» выравнивать в одну линию, то да.

Но в моем примере я говорил про такую задачу:
В каждом блоке товара (в каждом view-row) есть поля, которые должны быть верхней частью (картинка, название, опция, цена),
и есть поля, которые должны быть нижними (купить). Нижние должны быть на одной линии (см. картинку).
Высоту задавать верхней части или всему блоку товара (view-row) нельзя:
1. если высота верхней части будет мала (короткое название или отсутствие опций), то будет дырка между верхней частью и линией кнопок «купить».
2. если в каком-то блоке название будет слишком большое (а так случится), то верхняя часть заедет на кнопку «Купить».

Как я понял, у тлито примерно такая же ситуация, поэтому предложил сделать резиновой верхнюю часть (заголовок), и зафиксировать нижнюю часть (фиксированная картинка).

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

У ТСа — другая проблема и более глобальная, как я понимаю. ))
Заголовки в Друпале — это обычно генерация url
Нахрена там портянку вставлять (это не вопрос)

Размеры изображения

Это задание архивной главы. Перейдите по ссылке, чтобы пройти задание в актуальной главе.

Чтобы управлять шириной или высотой изображения, нужно использовать атрибуты width и height . Пример:

В примере изображению задана ширина 100px . Обратите внимание, что в атрибуте width после цифры нет px . Если вы задаёте размер картинки в пикселях, то используйте просто цифры. Добавлять px не нужно, таков стандарт.

Во втором примере изображению задана относительная ширина, 50 процентов:

Высоту в процентах обычно не задают.

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

Если же задать и ширину, и высоту для картинки:

То браузер может нарушить пропорции исходного изображения.

Css — Одинаковый размер картинок

Исходные данные: картинка 1200х800 например.
Нужно: урезанная картинка 350х350 с сохранением пропорций.

1) С помощью PHP узнаем наибольшую сторону (т.е. ширина это или высота). Например, с помощью такой функции:

Смотрите, какие размеры картинки есть внутри $size, анализируете их и вычисляете что больше — ширина, или высота. (Т.е. другими словами, картинка горизонтально- или вертикально-ориентирована)
2) Сжимаем картинку

Исходные данные: картинка 1200х800 например.
Нужно: урезанная картинка 350х350 с сохранением пропорций.

1) С помощью PHP узнаем наибольшую сторону (т.е. ширина это или высота). Например, с помощью такой функции:

Смотрите, какие размеры картинки есть внутри $size, анализируете их и вычисляете что больше — ширина, или высота. (Т.е. другими словами, картинка горизонтально- или вертикально-ориентирована)
2) Сжимаем картинку

так по идее скрипт должен сначала 1200х800 этот размер уменьшить на тот что мне нужен 500×500, ну и по сути он обрежет лишнее, а потом уже что бы из этих данных покащывалась область та что мне нужна 366×250

так как если он будет показывать область из 1200х800, то то там ничего видно не будет.

вот пример:
фотка 1200×960, если сделать что бы из неё область та что мне надо показывалась, то вид будет такой.

можно сделать что бы скрипт обрезал фото, но так будет не красиво, он вырежет область из большой фотки 366×250, ну и будет видно выше на картинки что он будет показвать что то не понятное, тут надо делать что бы скрипт уменьшал фото до 500×500 ну и обрезал за одно если будет лишнее, так как фото все разные что по вертикали что по горизонтали и придеться скрипты обрезать, нужно что бы как бы он от середины отсчитывал что лишнее и вырезал, допустим загружаем и скрипт делает фотку 1200×960 на 500×500, можно меньше но не то будет все равно, и уже исходя из 500×500 размера, показываем область, 366×250 и вот пример:

а если сделать так что бы скрипт уменьшал по ширине, до 366 и если есть лишка в длине то что бы срезал и меньшал до 250, то будет так.

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

я думаю так и сделаю без всяких там css, так и фотка меньше весить будет !


а как быть если он обрежет по ширине и так выйдет что высота будет меньше чем 250, тогда обрезать не будет и фотка будет смотреться уже не хорошо ! косяк как с ним быть ? или сделать что бы обрезалось ровно все стороны по 366×366 и сделать что бы показывалась по центру фотка.

Картинки в HTML – шпаргалка для новичков

Прежде, чем ответить на вопрос « как вставить картинку в HTML? », следует отметить, что перегружать веб-страницы огромным количеством графического материала не стоит, поскольку это не только улучшит визуальное восприятие ресурса пользователем, но и увеличит время загрузки страницы.

При создании веб-сайтов чаще всего используют графические форматы PNG , GIF и JPEG , а для дизайнерских работ с изображениями — графический редактор Adobe Photoshop , обладающий богатыми возможностями для сжатия и изменения размера изображений без потери качества, что является невероятно важным для веб-разработки.

Как вставить изображение в HTML?

Для того чтобы вставить изображение на HTML-страницу, используется одиночный простой тег:

где xxx — адрес изображения. В том случае, если картинка находится в одной директории со страницей, тег будет выглядеть как:

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

Он показывается на месте картинки в момент его недоступности, загрузки или в режиме работы браузера « без картинок ». Добавляется он с помощью атрибута alt тега .

Пример добавления альтернативного текста к графическому файлу:

Назначение размеров картинки в HTML

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

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

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

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

Данные параметры можно указать как в пикселях (размер картинки постоянен и не зависит от разрешения экрана пользователя), так и в процентах (размер картинки зависит от разрешения экрана).

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

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

Расположение картинки в HTML

Как и ко многим тегам HTML, к применим атрибут align , который выполняет выравнивание изображения:

Тема: Одна картинка, размер зависит от CSS

Опции темы
Отображение
  • Линейный вид
  • Комбинированный вид
  • Древовидный вид

Одна картинка, размер зависит от CSS

Есть плагины типа litebox. Которые открывают при клике на изображение модальное окно с картиной.

Для таких плагинов нужны 2 картинки(маленькая и большая)

Мне же нужно чтобы картинка была всего 1 (размер менялся через CSS)

Предположим, у меня есть картинки разного размера width

600px
Все они отображаются в странице, где эти картинки имеют фиксированный w > Когда же я кликаю по ним, открывается мод. окно с картинкой реального размера.

__________________________________________________ _______
Это нужно для одной CMS системы, с плагином hak_tinymce.

The Following User Says Thank You to alivato For This Useful Post:

для таких плагинов не обязательно 2 картинки — это просто правильнее. а так задайте атрибут ширина кликабельной картинки какой вам нужен
например (пример использования плагина prettyphoto, но применим ко всем):

но использование 1 картинки не очень хорошо тем, что представьте себе что у вас на странице их штук 5 каждая может весить пусть по 400 KB (хотя я видел как люди заливали картинки и по 2МВ 1 штука). итого 2MB нужно прогрузить тогда когда на страницу кто-то зашел, а человек может даже не захочет кликнуть на картинки. при использовании маленькой картинки возьмем к примеру даже по 10KB у нас получится всего 100KB за 5 картинок
разница мне кажется очень существенна 100KB или 2MB, а если картинок 10 на странице, а если человек зашел в интернет со скоростью 512 KBit/с ( это около 50-60 KB/c)?

Цукерберг рекомендует:  Реальность дополнительная и виртуальная
Понравилась статья? Поделиться с друзьями:
Все языки программирования для начинающих
08.01.2014, 13:24 #8