Как сделать фото img (размер 1920х600) на всю ширину экрана (за пределы контейнера)

Question

Получилось расположить фото на всю ширину при текущих условиях

.full-width {
  display: block;
  transform: translateX(-50%);
  max-width: 100vw;
  min-width: 100%;
  margin: 20px 0px 30px 33.3%;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
}

Там есть фрагмент с фото

<figure class='full-width'>
    <img src="https://i.ibb.co/WFbyXCB/foto1-Giza.jpg">    
  </figure>

Его не получается сделать на всю ширину экрана из-за условия, как раз делящего эту самую ширину

@media (min-width: 500px) {
      article {
        flex: 0 0 60%;
        max-width: 60%;
        order: 1;
      }

      aside {
        flex: 0 0 40%;
        max-width: 40%;
        margin-bottom: 15px;
        order: 2;
      }
    }

Как это можно здесь исправить и возможно ли? в идеале, чтобы изображение растягивалось на всю ширину экрана, а все остальное оставалось на своих местах. Так как фото непосредственно располагается в теле article (

Answer 1

Дочерний блок шире родительского блока с ограниченной шириной. Как сделать?

body {
  background-color: black;
}
.container {
  background-color: #fff;
  max-width: 80%;
  margin: 0 auto;
  padding: 10px;
}
img {
  display: block;
  transform: translateX(-50%);
  max-width: 100vw;
  min-width: 100%;
  margin: 40px 0px 40px 50%;
}

<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam optio quasi sapiente labore enim nisi sit, facere adipisci corrupti distinctio. Fuga eos in debitis, recusandae rerum minus nulla sint doloribus ducimus dolore non, repellendus, ullam quia.
    Molestiae enim ratione eaque?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit nemo sit qui dolorem, minima quibusdam. Cumque aperiam sint odio culpa totam alias explicabo suscipit voluptates officiis adipisci temporibus, amet ipsum, vero voluptatibus consequatur
    rerum, aut ullam. Sequi iusto, similique. Quis eaque, veritatis sapiente ea amet, veniam neque voluptatem repellendus possimus laboriosam quasi nam aliquam ullam similique, expedita. Quo aliquam molestias ratione nemo pariatur sed velit, sint nulla
    tempore eveniet maiores nesciunt explicabo quas! Nesciunt, reprehenderit! Soluta voluptatibus perferendis quod nam.</p>
  <p>
    <img src="https://s1.1zoom.ru/b5050/977/Mountains_Scenery_473520_2048x1152.jpg" alt="image1">
  </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur a saepe eveniet similique laudantium non aut delectus, facere libero ut vitae, enim tempore magnam eligendi adipisci cum minus. Eius doloremque molestias, dolores consequatur hic! Culpa
    eveniet, velit nam dolor dignissimos!</p>
  <p>
    <img src="https://s1.1zoom.ru/b5050/977/Mountains_Scenery_473520_2048x1152.jpg" alt="image2">
  </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam optio quasi sapiente labore enim nisi sit, facere adipisci corrupti distinctio. Fuga eos in debitis, recusandae rerum minus nulla sint doloribus ducimus dolore non, repellendus, ullam quia.
    Molestiae enim ratione eaque? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit nemo sit qui dolorem, minima quibusdam. Cumque aperiam sint odio culpa totam alias explicabo suscipit voluptates officiis adipisci temporibus, amet ipsum, vero voluptatibus consequatur
    rerum, aut ullam. Sequi iusto, similique. Quis eaque, veritatis sapiente ea amet, veniam neque voluptatem repellendus possimus laboriosam quasi nam aliquam ullam similique, expedita. Quo aliquam molestias ratione nemo pariatur sed velit, sint nulla
    tempore eveniet maiores nesciunt explicabo quas! Nesciunt, reprehenderit! Soluta voluptatibus perferendis quod nam.</p>
  <p>
    <img src="https://s1.1zoom.ru/b5050/977/Mountains_Scenery_473520_2048x1152.jpg" alt="image3">
  </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam optio quasi sapiente labore enim nisi sit, facere adipisci corrupti distinctio. Fuga eos in debitis, recusandae rerum minus nulla sint doloribus ducimus dolore non, repellendus, ullam quia.
    Molestiae enim ratione eaque?</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit nemo sit qui dolorem, minima quibusdam. Cumque aperiam sint odio culpa totam alias explicabo suscipit voluptates officiis adipisci temporibus, amet ipsum, vero voluptatibus consequatur
    rerum, aut ullam. Sequi iusto, similique. Quis eaque, veritatis sapiente ea amet, veniam neque voluptatem repellendus possimus laboriosam quasi nam aliquam ullam similique, expedita. Quo aliquam molestias ratione nemo pariatur sed velit, sint nulla
    tempore eveniet maiores nesciunt explicabo quas! Nesciunt, reprehenderit! Soluta voluptatibus perferendis quod nam.</p>
</div>

Чем смог.

БЛОГ НА HUSL

Как сделать фото img (размер 1920х600) на всю ширину экрана (за пределы контейнера)

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