#html #css #image #dom #popupwindow
Вопрос:
Я пытаюсь сделать простой центрированный всплывающий div, чтобы показать изображение внутри него. Всплывающее окно div должно иметь размер изображения, но когда изображение больше, чем окно страницы, оно переполняется его родителем. Я хочу установить максимальный размер изображения на размер окна без использования JS.
Я пытаюсь это сделать, но это не работает, есть идеи ?
body {
color: red;
}
.popup-window {
padding : 5px;
background-color: aquamarine;
display : inline-block;
position : absolute;
top : 50%;
left : 50%;
transform : translate(-50%, -50%);
max-width : 100%;
max-height : 100%;
}
.popup-window>img {
object-fit: contain;
} <!doctype html>
<html>
<head>
<title>This is the title of the webpage!</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<div class="popup-window">
<img src="https://conpeek.com/test/przod_auta.jpg">
<!-- <img src="hubspot.png"> -->
</div>
</body>
</html> ПРОБЛЕМА РЕШЕНА
стиль изображения должен выглядеть так:
.popup-window>img {
max-width: 100vw;
max-height: 100vh;
}
и затем, когда изображение меньше, чем видовой экран, оно имеет естественные размеры, но когда оно больше, чем размер видового экрана, оно правильно подогнано под видовой экран.
Ответ №1:
размещение объектов по размеру-хороший способ, так как вы убедитесь, что изображение полностью видно. Но для того, чтобы это работало, элемент img должен иметь заданные ширину и высоту (чтобы система знала, в чем она пытается разместить изображение). Без этих настроек вы просто получите изображение в его естественных размерах.
body {
color: red;
}
.popup-window {
padding: 5px;
background-color: aquamarine;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
max-height: 100%;
width: 100vw; /* added for demo */
height: 100vh; /* added */
}
.popup-window>img {
object-fit: contain;
width: 100%;
height: 100%;
} <!doctype html>
<html>
<head>
<title>This is the title of the webpage!</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<div class="popup-window">
<img src="https://conpeek.com/test/przod_auta.jpg">
<!-- <img src="hubspot.png"> -->
</div>
</body>
</html> Комментарии:
1. Но в этом случае после вашего изменения картинка становится маленькой (я не понимаю, почему она устанавливается именно на этот размер, почему, кстати, не может быть больше или меньше). Когда изображение больше, чем окно страницы, я хочу увеличить его максимальную ширину и максимальную высоту до 100% окна страницы. Стили, такие как максимальная ширина или максимальная высота, не работают (я думаю, что у родителей beaceose нет объявленного размера), поэтому это не удовлетворяет anser для меня 🙁
2. Если вы хотите, чтобы всплывающее окно закрывало видовое окно, вы можете установить его таким образом — я не уверен, что понимаю, какого размера вы хотите, чтобы оно было. Сейчас я изменю код, чтобы всплывающее окно заполняло окно просмотра. Но вы хотите сказать, что хотите, чтобы это происходило только тогда, когда естественные размеры изображения больше, чем видовое окно, в противном случае вы хотите, чтобы оно было меньше?
3. Когда изображение меньше, чем окно просмотра , изображение должно отображаться с естественными размерами, а родительское всплывающее окно должно быть того же размера, что и изображение (родитель соответствует размеру ребенка и имеет пространство для заполнения), но когда изображение больше, чем окно просмотра, всплывающее окно и изображение должны иметь максимальный 100% (минус заполнение родительского) размер окна просмотра.
4. хорошо, ваше изменение указывает мне на окончательный анализ, я должен добавить максимальную ширину: 100vw; максимальную высоту: 100vh; в стили изображений, и это работает так, как мне нужно 🙂 Я забочусь о vw и vh. Спасибо! Если вы хотите, пожалуйста, измените свой код, и я отмечу ваш ответ как решенную проблему