JSFiddle - React, Tailwind, and code Playground

Адаптивный вариант

by Ankhena

HTML

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel sint labore et, ut consectetur quidem qui iure eligendi sed, quae adipisci sapiente, nulla excepturi nihil cum modi similique accusantium quos officiis perferendis delectus tempore. Voluptatum quas, repellendus quam itaque numquam vero placeat labore animi odit, perferendis. Nam magnam ducimus voluptas, doloremque ea adipisci tempore culpa atque rem aut, esse accusantium molestias eius amet quae ipsam. Culpa, repellendus unde suscipit laboriosam minus praesentium delectus possimus iusto mollitia quasi impedit inventore qui veritatis natus, quae soluta repellat nesciunt asperiores recusandae, cumque aliquid corrupti. Adipisci ex quidem sequi dignissimos. Doloribus maiores itaque aspernatur?</div>

CSS

* {
  box-sizing: border-box
}

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

div {
  padding-bottom: 200px;
  background: radial-gradient(farthest-side at top, transparent 99%, white 100%) no-repeat center calc(100% + 1px) / 120% 25%, url('http://cdn2.livelongandtravel.com/travel-by-train-1920x1200.jpg') no-repeat top center / cover;
}
div::after {
  content: '';
  display: block;
  //padding-top: 50%; 

}