Возможно ли использовать source без picture или в picture пихать ссылку?

Question

[GoodPirojok]

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

<figure>
<picture>
 <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
 <img src="mdn-logo-narrow.png" alt="MDN">
</picture>
<a>link</a>
</figure>

Comments

[Ankhena]

Так оберните picture ссылкой. Или объясните суть проблемы.

<a>
<picture>
 <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
 <img src="mdn-logo-narrow.png" alt="MDN">
</picture>
</a>

Answer 1

[Sergey]

Есть спецификация для <picture> и нарушать нельзя, а то браузеры могут отреагировать на это по своему.

Есть еще тот же <img>, может он вам больше подойдет для элегантности...

<img
        src="images/400.jpg"  
        srcset="images/800.jpg 2x, images/1200.jpg 3x"
        sizes="(min-width: 700px) 75vw, 100vw"
        >

Comments

[GoodPirojok]

Как мне через img задать настройки изображений, допустим под 700 и 1200px?

я не понял, как оно работает

srcset="images/800.jpg 1000w, images/1200.jpg 1400w"

в описании написано, что w это пиксели, но при изменении разрешений, изображение не менялось.

А с этим примером я не понял, как можно контролировать эти х2, х3, в описании было, что они по умолчанию сами подбираются на мобильных устройствах.
srcset="images/800.jpg 2x, images/1200.jpg 3x"

[Sergey]

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

Answer 2

[Арсений Матыцин]

Читай документацию:

Любой элемент, который разрешает встроенный контент

Это значит, что ты можешь завернуть его в тег <a>, так как сам picture это не более, чем техническая обертка.