#html #css #frontend
Вопрос:
Я хочу установить определенную точку на изображении, чтобы она всегда находилась в центре окна браузера или области просмотра, независимо от того, какой размер окна я использую. Это позволило бы мне «выделить» что-то на картинке и убедиться, что оно всегда находится в кадре, независимо от того, какое устройство или размер экрана я использую. Для достижения этого я перепробовал все, используя свойства CSS object-position и object-fit. В качестве точки входа я использовал ту же систему, которую использует WordPress, если вы добавляете изображения в качестве фона в div внутри сообщения. Затем вы можете установить «фокусную точку» внутри визуального редактора, и это в основном дает вам проценты слева и сверху, которые затем используются с указанными свойствами CSS во внешнем интерфейсе.
Однако кажется, что свойство объекта CSS-position, похоже, не центрирует установленную «фокусную точку» изображения в окне браузера. Я не могу понять, почему это так, это происходит в каждом браузере.
Я настроил небольшой тест ниже. Изображение, которое я прикрепил, имеет пурпурный крест, который находится ровно на 70% слева и на 70% сверху. Насколько я понимаю, используя следующий код и устанавливая позицию на 70% и 70%, крест должен быть центрирован в окне просмотра, как только это позволит пробел с правой стороны креста. Однако крест, похоже, смещен от центра, хотя это было бы возможно. Вы можете протестировать разные значения и увидеть перекрестное перемещение, так что в целом это работает. Я добавил синие линии вдоль изображения, чтобы вы могли видеть, когда он начнет обрезать изображение слева и справа. Как вы можете видеть, я установил object-fit для «покрытия».
<!DOCTYPE html>
<html>
<head>
<style>
img.a {
height: 100vh;
object-fit: cover;
object-position: 70% 70%;
border: 5px solid red;
}
</style>
</head>
<body>
<h2>The object-position Property</h2>
<p>Test to see if object-position is in the middle of the viewport:</p>
<img class="a" src="image_centering.jpg" width="100%" height="100%">
<h2>Original image:</h2>
<img src="image_centering.jpg" width="400px">
</body>
</html>
И вот изображение, которое я подготовил для вас, чтобы вы могли его протестировать:
Для меня было бы важно выяснить, является ли это ожидаемым поведением, если я что-то неправильно понял, если это ошибка, если все вы можете воспроизвести это и т.д.
Редактировать: поскольку люди, похоже, не понимают, чего я хочу достичь, вот более наглядный пример. Сверху вы можете увидеть полное изображение, которое мы используем на рабочем столе, в значительной степени без обрезки из-за соотношения сторон. На мобильном устройстве, на нижнем изображении, если мы просто центрируем изображение, вы можете увидеть, что часы обрезаны. Мы хотим установить точку фокусировки на часах, чтобы она находилась в центре окна просмотра на мобильном устройстве. https://imgur.com/a/1l1qonJ
Редактировать 2: Эта справочная статья Squarespace также может помочь определить мою ситуацию. Они пишут цитату: «Область, установленная фокусной точкой, теперь отображается как центр вашего изображения». https://support.squarespace.com/hc/en/articles/205826028-Using-focal-points-to-center-images
Комментарии:
1. Не проще ли просто убедиться, что крест находится в центре вашего изображения, а не указывать
object-position?2. Нет, тест с крестом предназначен только для того, чтобы очень конкретно протестировать поведение. У нас есть веб-сайт с витринами, и поскольку большинство изображений оптимизированы для ландшафта, мы хотим сохранить их на рабочем столе, но обычно что-то на картинке было бы важным, например, часы, кольцо, автомобиль и т. Д. Итак, для мобильных устройств мы хотим, чтобы это было в центре внимания. Это выглядит странно, если оно отключено без причины слева или справа. Этот комментарий на самом деле не помогает.
3. Просто чтобы убедиться, что я понимаю — вам нужна одна указанная точка на изображении (в данном случае центр креста ??) находиться в центре окна просмотра, а все изображение должно быть соответствующим образом расширено, чтобы оно закрывало окно просмотра, с соответствующей обрезкой.
4. Да, в значительной степени. Я добавил пример в свой оригинальный пост, который должен объяснить, почему я не могу просто центрировать изображения для мобильных устройств, так как в некоторых случаях это будет выглядеть плохо.
5. «Однако кажется, что свойство CSS object-position, похоже, не центрирует заданную «фокусную точку» изображения в окне браузера.» — это не то, что делает object -position . Он устанавливает положение изображения внутри поля изображения, если размеры изображения отличаются от естественного размера изображения.
Ответ №1:
Если вы хотите, чтобы элемент (включая изображение) всегда находился в центре viewport , вы можете просто использовать flex display . Смотрите этот пример ниже:
div {
width:100vw; /*this makes the parent container fill the entire viewport at all times */
display:flex; /* set flex display */
justify-content:center;align-items:center /* center the child element image */
height:750px; /* just for the demo below not required */
border:4px solid black;
margin:0;
}
body, html {
margin:0;padding:0
}
<div>
<img src="https://www.w3schools.com/html/smiley.gif">
</div> Комментарии:
1. К сожалению, я не хочу сохранять полное изображение в центре области просмотра. Я хочу указать точку изображения, которая обрезается либо сверху / снизу, либо слева / справа, чтобы она находилась в центре области просмотра. Приведенный выше пример не помогает, поскольку изображение не является «обложкой».
2. Я не понимаю, чего вы хотите добиться, извините. Может быть, у вас есть онлайн-пример?
3. Вот пример. Вверху вы можете увидеть картинку, которую мы используем на рабочем столе. Если бы я просто центрировал это изображение на мобильном устройстве, вы могли бы увидеть, что происходит на втором изображении. Часы обрезаны. Итак, цель состоит в том, чтобы держать часы «в фокусе», поэтому независимо от того, на каком устройстве / размере экрана вы находитесь, часы всегда находятся в центре. Это то, для чего была создана позиция объекта: imgur.com/a/1l1qonJ
4. Хорошо, теперь я понимаю.