HTML <picture>в bootstrap столбец, выбранный по ширине области просмотра, а не по ширине столбца - PullRequest
Новая
       47

HTML <picture>в bootstrap столбец, выбранный по ширине области просмотра, а не по ширине столбца

1 голос
/ 13 февраля 2020

Я строю макет с двумя колонками bootstrap (шириной 10 + 2) для основного контента и боковую панель. В области из 10 столбцов я пытаюсь использовать элемент HTML <picture>, чтобы показать другое изображение в зависимости от ширины столбца , , а не области просмотра. Изображения содержат текстовые и графические данные, и я использую 5 версий графика с различными опущенными деталями вместо сокращения изображений

enter image description here

Использование тега min-width: media позволяет выбрать конкретное изображение на основе всего окна видового экрана вместо ширины bootstrap. 10-ти колоночная коробка. Мне нужно изображение, выбранное на основе ширины 10 столбцов.

TIA 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>

  <body>
    <div class="container">
   	  <div class="row">
        <div class="col-10">
          <picture>
    	    <source media="(min-width: 964px)" srcset="https://i.ibb.co/RCVnxvd/Chemo-Adverse-Reactions-964x701.png">
    		<source media="(min-width: 809px)" srcset="https://i.ibb.co/820HC9P/Chemo-Adverse-Reactions-809x701.png">
    		<source media="(min-width: 532px)" srcset="https://i.ibb.co/HCdXHBX/Chemo-Adverse-Reactions-532x630.png">
    		<source media="(min-width: 420px)" srcset="https://i.ibb.co/vsB3c8b/Chemo-Adverse-Reactions-420x630.png">
    		<img src="https://i.ibb.co/KNBfmhx/Chemo-Adverse-Reactions-298x630.png" class="img-fluid">
    	  </picture>
    	</div>
    	<div class="col-2">
    	  <p>Sidebar</p>
    	</div>
      </div>
    </div>
  </body>
</html>

Пример CodePen

...