Как на разных устройствах сделать изображения?

Question

[olya_097]

Как на разных устройствах сделать изображения ( они одинаковы, но высота и ширина разные)

мобильная версия

декстоп

Comments

[olya_097]

К чему вопрос не понимаю
я сама учусь
в интернете скачала макет

Answer 1

[Александр]

Через медиазапросы
!

Comments

[olya_097]

а через тэг picture?

[Dymok]

olya_097, как он здесь поможет? тут только flexbox и свойство order, а изображение любым способом задавать

[olya_097]

Dymok, Вы не поняли
имеется ввиду разные размеры у изображений

[Froggyweb]

olya_097, это вообще svg
picture экономит трафик для пиксеоьных изображений

[olya_097]

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

[Froggyweb]

olya_097, glivera-team.github.io/svg/2016/06/13/svg-sprites-...

[Сергей delphinpro]

olya_097,

но на мобилке и планшете разные размеры у изображений
как исправить?

ну задайте разные размеры через css и всё.

img {
  width: 50px;
}

@media (min-width: 768px) {
  img {
    width: 100px;
  }
}

[olya_097]

Сергей delphinpro, спасибо
а как цвет поменять? при экпорте картинка не такого цвета, как нужно, а по умолчанию черного

[Сергей delphinpro]

olya_097, откройте svg файл в блокноте и пропишите тегам fill="red" или stroke="red", смотря как вам нужно. Сохраните файл. Используйте.

Answer 2

[tyzberd]

svg + медиазапросы

Comments

[olya_097]

тэг picture? именно для разных изображений сделать (фотографии одинаковые, но размеры разные)?

[tyzberd]

нет. Делайте через SVG-спрайты как вам скинули в другом ответе и стилями в media меняйте ширину и высоту

[olya_097]

tyzberd, а лучше вставлять свг через тэг img( экспорт через экспортировать как)

или через тэг svg(экспорт через экспортировать содержимое)? или без разницы?

[tyzberd]

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

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

[Сергей delphinpro]

olya_097,

а лучше вставлять свг через тэг img( экспорт через экспортировать как)

Если это просто картинка - то img
Если вам нужно будет интерактивно менять какие-то свойства, например, изменить цвет при наведении, то вставляйте svg кодом или через xlink:href

[olya_097]

Сергей delphinpro, вот дописала
но ничего не поменялось

[Сергей delphinpro]

olya_097, не сюда. к тегам path или g или какие у вас там есть. К тем, что рисуют саму картинку.

[Сергей delphinpro]

Или скиньте код картинки. Подскажу.

[olya_097]

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 84.00267 100.11067"
   height="100.11067"
   width="84.00267"
   xml:space="preserve"
   id="svg2"
   version="1.1"><metadata
     id="metadata8"><rdf:RDF><cc:Work
         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
     id="defs6"><clipPath
       id="clipPath18"
       clipPathUnits="userSpaceOnUse"><path
         id="path16"
		  
         d="M 0,75.083 H 63.002 V 0 H 0 Z" /></clipPath></defs><g
     transform="matrix(1.3333333,0,0,-1.3333333,0,100.11067)"
     id="g10"><g
       id="g12"
	   ><g
         clip-path="url(#clipPath18)"
         id="g14"><path
           id="path20"
           style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
           d="M 60,38.999 H 38.053 V 49.853 H 60 Z M 57.125,2.936 H 38.053 v 33.063 h 19.072 z m -22.01,0.002 h -7.063 v 46.916 h 7.063 z M 25.114,38.999 H 3 v 10.854 h 22.114 z m 0,-36.063 H 6.042 v 33.063 h 19.072 z m -5.882,56.426 c -2.19,1.467 -6.444,4.378 -6.342,7.678 0.11,3.552 5.655,6.491 8.68,3.839 3.797,-3.331 5.625,-10.972 7.01,-16.357 -3.199,1.519 -6.23,2.753 -9.348,4.84 m 22.534,9.848 c 2.07,0.306 4.907,-1.283 5.175,-3.171 0.387,-2.723 -3.348,-5.192 -5.007,-6.343 -2.484,-1.723 -4.853,-2.611 -7.178,-4.006 0.872,3.645 2.512,12.854 7.01,13.52 M 60.165,52.853 H 60.063 35.758 c 13.603,6.815 14.687,11.115 14.187,13.52 -1.144,3.916 -5.603,6.938 -9.847,5.341 -5.485,-2.063 -7.03,-10.262 -8.514,-16.19 -1.894,5.998 -3.726,13.649 -8.011,17.525 -1.242,1.125 -3.049,2.237 -5.676,2.003 C 13.932,74.7 8.245,69.735 10.553,64.203 12.77,58.89 20.092,55.533 24.907,52.853 H 2.834 C 1.275,52.853 0,51.577 0,50.018 V 38.833 c 0,-1.559 1.275,-2.834 2.835,-2.834 h 0.27 V 0 h 56.958 v 35.999 h 0.104 c 1.562,0 2.835,1.275 2.835,2.834 V 50.018 C 63,51.577 61.725,52.853 60.165,52.853" /></g></g></g></svg>

[olya_097]

Сергей delphinpro, скинула
пробовала поменять-не меняется

[Сергей delphinpro]

olya_097, Видите у вас в атрибутах style стоит черный цвет? поменяйте на свой. Везде, где найдете.

[olya_097]

Сергей delphinpro, спасибо огромное!

[tyzberd]

olya_097, с помощью иллюстратора, а потом этого сайта https://jakearchibald.github.io/svgomg/ с иконку можно подготовить
https://codepen.io/tyzberd/pen/QJjgYE