There is a concept of vertical rhythm, which assumes that all vertical indents on the page are proportional to a certain number, for example, font size 16px or 1em. As a result, the entire layout is beautifully placed on the grid and looks great. But, when we insert a picture of non-standard sizes, all that goes below the grid and, if we have a multi-column site, it becomes noticeable.
Actually the question is: how to trim the pictures on the page so that their width and height are always multiples (divided completely into 16) grid step? At the same time, I want to maintain adaptability, i.e. so that the size of the pictures changed on the fly discretely.
html { font-family: sans-serif; font-size: 16px; line-height: 24px; } body { background:repeating-linear-gradient(transparent,transparent 23px, gray 24px),repeating-linear-gradient(90deg,transparent,transparent 23px, gray 24px); font-size: 1em; line-height: 1.5em; padding: 0 1em; } h1 { font-size: 2.375em; line-height: 1.26315789em; margin-top: 0.63157895em; margin-bottom: 1.2631579em; } p { margin-top: 0em; margin-bottom: 1.5em; max-width: 552px; } img { max-width:100%; height: auto; } <h1>Lorem ipsum</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis libero magni ex nam, aliquid minus officiis, at impedit enim voluptatum tempora qui quisquam mollitia aperiam ullam cum soluta distinctio voluptatem.</p> <p>Adipisci veritatis libero tempora, consequatur qui atque autem magni assumenda eius reiciendis nam soluta aliquid, eum optio dignissimos. Eveniet, eaque. Numquam error inventore, hic soluta fugit sed aspernatur maiores deleniti.</p> <p><img src="http://lorempixel.com/output/animals-qc-600-375-9.jpg"></p> <p>Soluta ad rem excepturi eos temporibus molestiae iusto optio earum sit, odit minima quis nulla deleniti. Labore aperiam qui reiciendis a, distinctio eligendi fugit, fugiat tenetur incidunt quod libero id!</p> 