1

Может кто-нибудь знает, как при изменении размеров браузера, оставить центр фотографии в центре окна браузера?

Давно не верстал, забыл немного)

1

2 ответа 2

2

Обычный margin:

img {
  width: 500px;
  display: block;
  margin: 0 auto;
}
<img src="https://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/article_thumbnails/other/cat_relaxing_on_patio_other/1800x1200_cat_relaxing_on_patio_other.jpg" alt="">

С абсолютным позиционированием:

img {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  width: 400px;
}
<img alt="" src="https://t7-live-ahsd8.nyc3.cdn.digitaloceanspaces.com/animalhumanesociety.org/files/styles/crop_16_9_960x540/flypub/media/image/2019-06/collared%20cat%20outside.jpg?itok=Njrr22Tn">

С флекс-боксом:

body {
  display: flex;
  justify-content: center;
}

img {
  width: 400px;
}
<img src="https://news.cgtn.com/news/77416a4e3145544d326b544d354d444d3355444f31457a6333566d54/img/37d598e5a04344da81c76621ba273915/37d598e5a04344da81c76621ba273915.jpg" alt="">

0

В копилку еще вариант с position: absolute и transform: translate;

img {
  width: 200px;
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, 0);
}
<img src="https://news.cgtn.com/news/77416a4e3145544d326b544d354d444d3355444f31457a6333566d54/img/37d598e5a04344da81c76621ba273915/37d598e5a04344da81c76621ba273915.jpg" alt="">

только с transform: translate;

img {
  width: 200px;
  transform: translate(100%, 0);
}
<img src="https://news.cgtn.com/news/77416a4e3145544d326b544d354d444d3355444f31457a6333566d54/img/37d598e5a04344da81c76621ba273915/37d598e5a04344da81c76621ba273915.jpg" alt="">

ну и бонус:

<table style="width: 100%; text-align: center;"><tr><td>
<img src="https://news.cgtn.com/news/77416a4e3145544d326b544d354d444d3355444f31457a6333566d54/img/37d598e5a04344da81c76621ba273915/37d598e5a04344da81c76621ba273915.jpg" alt="" style="width: 200px;">
</td></tr></table>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.