1

На сайте нужно разместить картинку в пк версии вот так: введите сюда описание изображения

это я сделал, дальше нужно, чтобы в мобильной версии телефона, она становилась так: введите сюда описание изображения

На всю ширину экрана, обрезавшись и имея четко лицо, не ноги и т.д

Со своим кодом я имею:

введите сюда описание изображения

Она не обрезается, а становится меньше. Мой код:

HTML

<div class="container">
        <div class="row">
            <div class="col-12">
                <img src="../img/aboutUsGirl.png" width="100%" alt="">
            </div>
        </div>
    </div>

2 ответа 2

3

Вариант с img

.block {
  display: block;
  width: 75%;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.block::before {
  content: '';
  display: block;
  height: 0;
  padding-top: 75%;
}

.block img {
  display: block;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
}
<div class="block">
  <img src="//i.imgur.com/YvZWVz1.png">
</div>

Вариант на background

.block {
  display: block;
  max-width: 60%;
  margin: 0 auto;
  position: relative;
}

.block::before {
  content: '';
  display: block;
  height: 0;
  padding-top: 75%;
}

.block::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: url('//i.imgur.com/YvZWVz1.png') no-repeat center center / 200% auto;
  position: absolute;
  left: 0;
  top: 0;
}
<div class="block"></div>

1

Вариант с object-position

.img {
  max-width: 768px;
  margin: auto;
}

img {
  display: block;
  width: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .img {
    width: 200px;
    height: 150px;
    margin: 0;
  }
  .img img {
    width: 400px;
    height: 150px;
    object-position: -150px 0px;
  }
}
<div class="img">
  <img src="https://bbmlive.com/adult/wp-content/uploads/2020/07/photo-1554949282-4f7f656833f0.jpg" alt="">
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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