обрезать картинку слева при уменьшении секции

Question

Есть секция шириной например 1600. В ней по центру есть контент шириной 1000px. в секции через бекграунд, или просто сразу через img. Должна быть картинка слева, шириной 500px.

Важно, чтобы при уменьшении секции, секция уменьшалась равномерно с лева и справа! То есть картинка обрезалась слева и не двигалась. Контент всегда должен быть по центру, и картинка не должна уезжать в право. Как это сделать через css? Мне важно что-бы эта картинка немного заезжала под контент пикселей на 200. Но не дальше. Пример кода:

.section{
  max-width: 1600px;
  height: 400px;
  background-color: #74992e;
  display: flex;
  justify-content: center;
}

.content{
  width: 1000px;
  background-color: rgba(0, 0, 0, .5);
  z-index: 10;
}

img{
  position: absolute;
  top: 10;
  left: 0;
}

p{
  color: white;
}

 
<div class="section">
  <img  src="https://loremflickr.com/500/400?random=1" alt="lorem">
 
  <div class="content">
  <p>CONTETN in center Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum doloribus doloremque tenetur error et est labore, commodi molestias iste consequatur inventore sunt, in eos delectus expedita porro a, eaque minima? CONTETNCONTETN Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum doloribus doloremque tenetur error et est labore, commodi molestias iste consequatur inventore sunt, in eos delectus expedita porro a, eaque minima? CONTETNCONTETN Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum doloribus doloremque tenetur error et est labore, commodi molestias iste consequatur inventore sunt, in eos delectus expedita porro a, eaque minima? CONTETN</p>
    </div>
</div>

Answer 1

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

С помощью background-image и background-position:

.section {
  position: relative;
  display: flex;
  justify-content: center;
  height: 400px;
  max-width: 1600px;
  overflow: hidden;
  background-color: #74992e;
  background-image: url(https://loremflickr.com/500/400?random=1);
  background-repeat: no-repeat;
  background-position: calc(100% - 1100px) 0;
  background-size: 500px 400px;
}

.content {
  width: 1000px;
  background-color: rgba(0, 0, 0, 0.5);
}

p {
  color: white;
}

<div class="section">
  <div class="content">
    <p>Есть секция шириной, например, 1600px. В ней по центру есть контент шириной 1000px. В секции через бекграунд, или просто сразу через img, должна быть картинка слева, шириной 500px.
      <br><br> Важно, чтобы при уменьшении секции, секция уменьшалась равномерно слева и справа! То есть картинка обрезалась слева и не двигалась. Контент всегда должен быть по центру, и картинка не должна уезжать в право.
      <br><br> Как это сделать через css? Мне важно что-бы эта картинка немного заезжала под контент пикселей на 200. Но не дальше.
    </p>
  </div>
</div>

С помощью <img> и position: absolute:

.section {
  position: relative;
  display: flex;
  justify-content: center;
  height: 400px;
  max-width: 1600px;
  overflow: hidden;
  background-color: #74992e;
}

.content {
  position: relative;
  width: 1000px;
  background-color: rgba(0, 0, 0, 0.5);
}

img {
  position: absolute;
  top: 0;
  right: 1100px;
}

p {
  color: white;
}

<div class="section">
  <img src="https://loremflickr.com/500/400?random=1" alt="lorem">
  <div class="content">
    <p>Есть секция шириной, например, 1600px. В ней по центру есть контент шириной 1000px. В секции через бекграунд, или просто сразу через img, должна быть картинка слева, шириной 500px.
      <br><br> Важно, чтобы при уменьшении секции, секция уменьшалась равномерно слева и справа! То есть картинка обрезалась слева и не двигалась. Контент всегда должен быть по центру, и картинка не должна уезжать в право.
      <br><br> Как это сделать через css? Мне важно что-бы эта картинка немного заезжала под контент пикселей на 200. Но не дальше.
    </p>
  </div>
</div>

БЛОГ НА HUSL

обрезать картинку слева при уменьшении секции

Ответы (1 шт):