Проблемы Резюме
Мой желаемый макета должна быть в состоянии к центру (как по вертикали, так и по горизонтали) изображения неизвестного размера на этой странице. Если изображение слишком велико, чтобы вписаться в любом направлении, я хочу показать полосы прокрутки, чтобы пользователь мог прокрутить, чтобы увидеть полное изображение. Проблема, с которой я столкнулся, заключается в том, что, когда изображение слишком велико, чтобы соответствовать, верхнее и левое изображение (в зависимости от того, какая часть отключена) никогда не смогут прокручиваться.Центрирования Элементы с Flexbox и переполнением
Покушение Решение
Я пытаюсь использовать Flexbox для достижения желаемого макета, но Flexbox не является обязательным требованием. Вот небольшой пример, который воспроизводит проблему (обратите внимание, что я не поставил никаких префиксов браузера в CSS, так что вы хотите, чтобы просмотреть это в Chrome [или, возможно, Firefox тоже?]):
.body {
height: 600px;
}
.container {
margin: auto;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid red;
height: 100%;
overflow: auto;
}
img {
border: 5px solid black;
}<div class="body">
<div class="container">
<img src="http://placehold.it/700x700" />
</div>
</div>Вы должны быть в состоянии увидеть границу полностью вокруг изображения, но левая и/или верхняя часть изображения обрезаются, когда окно сжимается. Все больше и больше изображения становятся недоступными, поскольку окно продолжает уменьшаться.
Обратите внимание: это не имеет значения, если есть изображение. Вот фрагмент кода только с помощью набившие оскомину дивы, чтобы показать проблему:
.body {
height: 600px;
margin-top: 80px;
}
.container {
margin: auto;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid red;
height: 100%;
overflow: auto;
}
.content {
border: 5px solid black;
width: 600px;
height: 600px;
background-color: gray;
}<div class="body">
<div class="container">
<div class="content"></div>
</div>
</div>Опять весь ДИВ всегда должен быть доступен с помощью прокрутки, но это не так.
Вопрос
Как я могу достичь желаемого макета, описанного выше , используя только HTML и CSS (JS ответы не принимаются)? Flexbox не требуется для решения проблемы, но это было бы неплохо.
Спасибо!
Если вы центрирование изображение, которое больше, чем окна просмотра, в верхней и левой всегда будет отсечка. Вы не можете прокручивать верхнюю или левую сторону окна просмотра. Вам нужно изменить способ обработки изображения с этими размерами, чтобы это не происходило, вероятно, через медиа-запросы, которые не позволяют центрировать изображение или простое старое изображение, чтобы оно соответствовало видовому экрану. Если он всегда должен быть центрирован, вам не нужно будет центрировать изображение и использовать js для прокрутки до центра, когда окно просмотра сжимается. – brouxhaha
Можете ли вы пояснить, что вы имеете в виду @brouxhaha? Если изображение слишком велико для окна просмотра, а элемент контейнера имеет набор прокрутки, я ожидаю, что вы сможете прокрутить весь контент в контейнере. –
Как вы можете, с собственными измерениями, такими как 'min-content',' max-content' и 'fit-content'. Но они мало известны или используются очень часто ... Я понятия не имею, почему.Я уверен, что есть другие методы, но они ускользают от меня. – zer00ne