There is a column with text. On the page it is one and takes about 70% of the entire width of the page. Located in the center. Page

Inside the text and some other elements, including images. It is necessary to make the images occupy, say, 90% of the width of the entire page. enter image description here

Here the whole thing is this.

  1. Use position: absolute will not work, because part of the text will not be visible, because it will be behind the picture.
  2. Just specify the width equal to, say, 180% for the image is also impossible, otherwise the result will be approximately the following. enter image description here
  3. It is also worth considering that the images may be different in width. From this it follows that you need to do the following: smaller images that do not reach the width of the column should be stretched so that they occupy 100% of the width of the genus. an item. And those that need wider stretching so that they occupy no more than 90% of the width of the entire page. Roughly speaking, the whole thing should look something like this:
 img { min-width: 100%; /* от ширины родителя */ max-width: 90%; /* от ширины всей страницы */ }

How can this be done? Allowed to frame img in div 's and other tags.

I remembered another inappropriate way: the option of framing all the content except for the pictures in an additional tag and giving it a margin or padding . This option is not suitable for at least two reasons: the task is to allow the image to be at (almost) the width of the page, while remaining at the center, and not to shift everything except the images so that they appear stretched (1). And the use of additional tags (which will be extremely inconvenient to do every time) (2).

  • @DimXenon for example, Chrome swears at negative values ​​of paddings and does not take them into account. - smellyshovel
  • Sorry, margin. Padding cannot be <0. - DimXenon
  • one
    width: 110%;margin-left: -5%; - DimXenon
  • one
    @DimXenon This solves the problem of a wider doc. block, but does not solve the dilemma with small-large images (and the question clarifies that this should be resolved) - smellyshovel

2 answers 2

It is enough to use relative units of measure.

 body { background-color: #eee; } .container { background-color: #fff; max-width: 70%; margin: 0 auto; padding: 10px; /* Для красоты */ } img { display: block; transform: translateX(-50%); margin-left: 50%; max-width: 90vw; min-width: 100%; } 
 <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?</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> <p> <img src="https://satyr.io/200x200/1" alt="Demo 1"> </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://satyr.io/750x300/2" alt="Demo 2"> </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> <p> <img src="https://satyr.io/750x300/3" alt="Demo 3"> </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>

Expand the example to the full page. So you can better see that the pictures are 90% wide.

  • What will be the behavior with small pictures? Try to change your answer so that at least one picture is less than the width of the block with the text. - smellyshovel
  • If all goes well, then your decision. By the way, why didn't you use max-width: 90vw? - smellyshovel
  • @smellyshovel, corrected, also thought about it. Because these units are calculated based on the width of the browser window. You cannot rely on the width of the parent. I dropped the link to the article in response to these units. - VenZell
  • Yes, I know about these units, I just somehow did not think about them at all. - smellyshovel
  • one
    @smellyshovel, exactly, ready! - VenZell

Variant of calculation through percentages of the width of the parent block

The parent unit occupies 70% window and is located in the center. The image occupies 90% of the window width. That is, it will protrude left and right at 10% of the width of the window. This is 10% / 70% = 0,1428571429 of the width of the parent block.

And the image width will be 90% / 70% = 1,2857142857 of the width of the parent.

So, you need to set the image such properties:

 margin: 0 -14.28571429%; width: 128.57142857%;

Checking:

 .container { background: #9c6; margin: 0 auto; padding: 100px 0; width: 70%; } .container img { margin: 0 -14.28571429%; width: 128.57142857%; } 
 <div class="container"> <img src="//placehold.it/800x400/c69/fff/" alt=""> </div>

  • Plus from me for not lazy to count - VenZell
  • Too crutch, no. - smellyshovel