#html #css #zooming #resize-image
#HTML #css #масштабирование #изменение размера-изображение
Вопрос:
В настоящее время у меня есть три изображения, размещенные горизонтально одно за другим на веб-странице. Когда пользователь увеличивает масштаб достаточно, макет страницы выделяет третье изображение, которое должно быть размещено под первыми двумя изображениями. Я бы предпочел, чтобы изображение просто «исчезало» в краю страницы, чтобы сохранить макет. Как я могу указать это поведение? Спасибо.
Ответ №1:
Поместить в контейнер и предотвратить перенос
<div style="white-space: nowrap;">
<img ... />
<img ... />
<img ... />
</div>
Конечно, разумнее использовать классы CSS вместо встроенных стилей.
И если вы хотите, чтобы контейнер можно было разворачивать, вы можете установить для него overflow стиль hidden .
Вот пример JSFiddle, который устанавливает оба стиля для содержащего div элемента, поэтому третий элемент (вставка изображений, которые я использовал span , но это не имеет значения) просто исчезает за краем. Если вы попытаетесь установить span ширину на фиксированный размер в пикселях и увеличить страницу, вы увидите, что элементы просто исчезают за краем.
Комментарии:
1. Я не думаю, что это хорошее решение для поддержания правильной структуры всего веб-сайта путем изменения размера. Я думаю, что это хорошая дополнительная мера, которую следует предпринять, однако, на случай, если моего решения окажется недостаточно в странных ситуациях масштабирования браузера
Ответ №2:
Установите фиксированную ширину на body или оболочку сайта div . Таким образом, размер браузера не должен влиять на элементы вашего сайта.
Ответ №3:
Вы можете поместить overflow:hidden; .. это скроет третье изображение при увеличении или уменьшении масштаба. 2. исправьте ширину оболочки и всех трех изображений и поместите float в img div. но оставьте ширину третьего div немного меньше по сравнению с другими.