Jump to content
  • 0

Размеры изображений в html или css?

ut2010

Asked by ut2010,

 Share

Question

ut2010 Explorer

ut2010

Posted
Posted (edited)

Подскажите, как правильно указывать размеры изображений, в коде html странички или создавать стиль на каждое изображение :(.

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

Edited by ut2010
Link to comment
Share on other sites

20 answers to this question

Recommended Posts

  • 0
psywalker Explorer

psywalker

Posted
Posted
Подскажите, как правильно указывать размеры изображений, в коде html странички или создавать стиль на каждое изображение :(.

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

Если имги много,разной, то можно прям в коде указывать для каждой картинки свои размеры, а елси Имга одна и повторяется,то в ЦСС

Link to comment
Share on other sites
  • 0
panig Explorer

panig

Posted
Posted
Если имги много,разной, то можно прям в коде указывать для каждой картинки свои размеры, а елси Имга одна и повторяется,то в ЦСС

По-моему лучше всегда в css писать.

Link to comment
Share on other sites
  • 0
rash Explorer

rash

Posted
Posted

Я бы всегда в HTML указывал. Надо померять, конечно, но кажется мне, что применяться будет быстрее, css-селектор еще распарсить надо, потом выборку по документу сделать.

Но тут что для вас важнее — компактность кода или скорость рендеринга.

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
По-моему лучше всегда в css писать.

Тогда расскажи-ка мне быстренький способ, если у тебя на странице допустим 20 имги разного размера. Ты для каждой будешь класс задавать?

Link to comment
Share on other sites
  • 0
ut2010 Explorer

ut2010

Posted
  • Author
Posted
Тогда расскажи-ка мне быстренький способ, если у тебя на странице допустим 20 имги разного размера. Ты для каждой будешь класс задавать?

Действительно ведь со стилями морока одна, но с другой стороны всё оформление должно быть вынесено в css?

Link to comment
Share on other sites
  • 0
panig Explorer

panig

Posted
Posted
Тогда расскажи-ка мне быстренький способ, если у тебя на странице допустим 20 имги разного размера. Ты для каждой будешь класс задавать?

думаю да, почему бы и нет?

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
а зачем им размер ставить?

Ну раз разговор зашёл об этом, то я бы из двух способов выбрал именно структуру, т.е. ставить размеры именно в html, а не вешать классы всем имгам, а ты Медведь как-бы поступил?

Link to comment
Share on other sites
  • 0
mishka Explorer

mishka

Posted
Posted (edited)

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

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

В css размеры картинке прописываю только если того действительно требует ситуация.

Edited by mishka2
Link to comment
Share on other sites
  • 0
DjTarik Explorer

DjTarik

Posted
Posted

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
Однозначно в HTML. По-ходу по спецификации просят, чтобы картинкам был задан размер, да и при отключенной графике в большинстве браузеров верстка не схлопнется/развалится.

+1 :(

Link to comment
Share on other sites
  • 0
mishka Explorer

mishka

Posted
Posted
Однозначно в HTML. По-ходу по спецификации просят, чтобы картинкам был задан размер, да и при отключенной графике в большинстве браузеров верстка не схлопнется/развалится.

Насчет однозначности спорный вопрос :(.

Бывает ситуация когда например картинку нужно масштабировать по ширине блока, такая вот себе резина... Это конечно редкие ситуации но бывает. Тогда таким картинкам я в css задаю ширину 100%.

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

Поэтому не совсем однозначно всем картинкам нужно размер ставить.

Link to comment
Share on other sites
  • 0
Navigator Explorer

Navigator

Posted
Posted
Действительно ведь со стилями морока одна, но с другой стороны всё оформление должно быть вынесено в css?

Со стилями никакой мороки нет. Нет такого правила, что все оформление должно быть вынесено в css, и что значит вынесено, помимо файла .css можешь подписывать каждому элементу style="". Например, всем картинкам задаешь одно и то же выравнивание , рамку и т.д., стилями, а размер пописываешь в HTML.

Link to comment
Share on other sites
  • 0
DjTarik Explorer

DjTarik

Posted
Posted
Насчет однозначности спорный вопрос :(.

Бывает ситуация когда например картинку нужно масштабировать по ширине блока, такая вот себе резина... Это конечно редкие ситуации но бывает. Тогда таким картинкам я в css задаю ширину 100%.

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

Поэтому не совсем однозначно всем картинкам нужно размер ставить.

не, ну бывают исключения))) на счёт иконок - согласен. Так и делаю.

Link to comment
Share on other sites
  • 0
DjTarik Explorer

DjTarik

Posted
Posted
Погодите, а я не понял про иконки 12х12, что вы имеете ввиду, можно поподробнее

Если размер изображения (вставляемого через <img>) меньше чем 12px (или что-то около того, точно не могу сказать) - то alt="" виден не будет. Соответственно, если не задавать ширину и высоту - тогда текст в alt="" "растянет" размеры рамки под себя.

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted
Если размер изображения (вставляемого через <img>) меньше чем 12px (или что-то около того, точно не могу сказать) - то alt="" виден не будет. Соответственно, если не задавать ширину и высоту - тогда текст в alt="" "растянет" размеры рамки под себя.

Аа, тут согласен конеш.

Link to comment
Share on other sites
  • 0
s0rr0w Explorer

s0rr0w

Posted
Posted
Ну, и ещё на таких мелких иконках, кликабельную область стоит делать больше... Пикселей на 5-10. Очень повышает юзабилити)

Люди целятся прямо в изображение. Поэтому иконки надо делать минимум 20пкс по высоте и ширине.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept