Блог

Предполагать:

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

Все предварительные просмотры или выходные данные уценки, которые я видел, автоматически изменяют размер вашего изображения, чтобы оно соответствовало экрану по горизонтали. Intellij, Визуальный Код Ms, Github…

Я покопался в самых глубоких закоулках Интернета и смог найти редких людей, которые спрашивали об этом, но не нашли ответа, подходящего для моего варианта использования.

Похоже, что с чистой уценкой это невозможно на момент написания этой статьи.

С помощью HTML CSS я почти могу заставить его работать, играя с одним или несколькими из следующих:

 // on divs containing the image overflow: ...; overflow-x: ...; width: ...; max-width: ...; display: ...;  // on the image object-fit: none; // with this the image gets cropped unless you force the width of some container to be bigger than the width of the image (in px values) float:...;  

Самое близкое, что я мог получить, это:

 lt;stylegt; div.outerDivImg {  overflow: scroll;    // without this, the container grows in height and your horizontal scrollbar gets far down  // so it obligates you to scroll all the way down to be able to move the horizontal scrollbar.  max-height: 100vh;  } div.innerDivImg {  // if you remove below, the image gets resized.  // if you remove below and put "object-fit: none;" on the img, it gets cropped to fit the screen.  width: 8000px; } lt;/stylegt; lt;div class="outerDivImg"gt; lt;div class="innerDivImg"gt;  lt;img class="innerImg" src='img/German-Cheatsheet.jpg'gt;lt;/imggt; lt;/divgt; lt;/divgt;  

But this has the side effect of producing a horizontal bar for the div that goes further to the right than the inner image.

Овации