В приложении моей фотогалереи, когда пользователь нажимает на фотографию из галереи, она отображается в полном размере. Проблема, с которой я сталкиваюсь, заключается в том, что при настройке поля для каждого изображения, отображаемого в полноэкранном режиме, отображаемое поле отличается в зависимости от фактического размера изображения.
То, что я хочу сделать, заключается в том, что ( независимо от размера изображения), я хочу, чтобы верхнее поле учитывалось, чтобы изображение отображалось так, чтобы верхнее поле начиналось в той же точке на странице для каждого изображения. Если изображение слишком большое, я бы хотел, чтобы появилась полоса прокрутки.
Я установил на полях 40px, но на большом изображении он отображается слишком далеко вверх по странице (см. Изображения ниже).
На изображении выше я хочу, чтобы все изображения начинались на странице
Изображение выше имеет тот же набор полей как показано выше, но, как вы можете видеть, отправная точка в верхней части страницы не является желаемым местом.
Соответствует HTML:
<div class="overlay">
<div class="image-container">
<img class="image-full-view" [ngStyle]="{'height': selectedImage.heightSize, 'width': selectedImage.widthSize}" [src]="selectedImage.imagePath" alt="Man Praying">
</div>
<div class="image-name-container">
<p class="image-name">{{ selectedImage.name }}</p>
</div>
Относительно CSS:
.image-full-view {
padding: 0px;
margin-top: 40px;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');
border: solid 5px black;
}
.image-container {
display: flex;
align-items: center;
justify-content: center;
border: solid 5px black;
height: 100%;
width: 100%;
}