Возникли проблемы с центрированием изображений и сохранением их отзывчивости для всех устройств

#html #css

Вопрос:

У меня есть изображение размером 955х955. Я хочу, чтобы он был адаптивным для всех устройств. Изображение имеет квадратный размер, но раздел не имеет квадратного размера, поэтому, когда я посещаю свой веб-сайт на маленьком экране, он выглядит не очень хорошо. И мой фокус этого образа — «мужчина». Я хочу сохранить центр управления, не имеет значения, какое устройство я использую для посещения своего веб-сайта. Я хочу, чтобы этот образ был похож на правильный. введите описание изображения здесь

И код такой

 img{ max-width:100%; max-height:100%; vertical-align:middle; object-fit:cover; }

1. Попробуйте изменить его размер с помощью % или rem

2. Где код? Что вы пробовали до сих пор?

3. Вам необходимо показать нам свой код, включая фактическое изображение, потому что требуемое позиционирование будет зависеть от положения человека на изображении (как по вертикали, так и по горизонтали).

4. это код, img{ максимальная ширина:100%; максимальная высота:100%; выравнивание по вертикали:середина; подгонка объекта:обложка; }

5. Вы можете попробовать использовать изображение в качестве фона в его Div. Затем используйте background: url(path-to-your-image) 50% 50% no-repeat . Возможно, вам также придется добавить background-size: cover , но сначала попробуйте без этого.

Ответ №1:

Укажите имя класса в соответствии с вашим полем изображения и в средствах массовой информации, запросите, добавьте приведенный ниже код

 .responsive {  max-width: 100%;  height: auto; }

1. Я пробую этот .отзывчивый { максимальная ширина: 100%; высота: авто;}, но не сработало

2. Как вы применили этот код .. вставьте свой код сюда для получения дополнительных разъяснений.

3. на самом деле я использую bootstrap, а также добавляю этот код для получения идеальной формы изображения на каждом отдельном устройстве. img{ максимальная ширина:100%; максимальная высота:100%; выравнивание по вертикали:середина; соответствие объекта:обложка; }

4. Добавьте этот код в медиа-запрос , он будет работать.. экран только для мультимедиа и (максимальная ширина: 600 пикселей) { .img{ Максимальная ширина:100%; высота:авто; } }