Skip to main content

Responsive Image with Aspect-Ratio - CSS


Responsive image strategy with aspect-ratio on mobile gets square images and any landscape screen or device gets landscape images. Change the inline-size to width and play around with length values that fit the design.

HTML

<img class="aspect-image" src="https://picsum.photos/1080/720" alt="">

CSS

.aspect-image {
  aspect-ratio: 1/1;
  width: 80vw;
  max-width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: aspect-ratio .5s ease
}
@media (orientation: landscape) {
    .aspect-image {
      aspect-ratio: 16/9;
    }
  }

Comments

Post a Comment

Popular posts from this blog

Create Vertical Text - CSS

From the old internet, the direction of text is pretty much fixed on left-to-right. In modern CSS has addressed the issue and supports vertical text with ease. Right to Left Vertical Text Right to Left Vertical Text HTML <div class= "v-rl" > <p> Right to Left </p> <p> Vertical Text </p> </div> CSS .v-rl { writing - mode : vertical - rl; } Left to Right Vertical Text Left to Right Vertical Text HTML <div class= "v-lr" > <p> Left to Right </p> <p> Vertical Text </p> </div> CSS .v-lr { writing - mode : vertical - lr; } All Characters Upright All Characters Upright Ultraman ウルトラマン HTML <div class= "t-upright" > <p> All Characters </p> <p> Upright </p> <p> Ultraman ウルトラマン </p> </div> CSS .t-upright { writing - mode : vertical - rl; text - orie...
Post a Comment
Read more

Distortion Glitch Text Effect - CSS

  Use multiple text-shadow properly in CSS on a text by comma separating the values. DEMO Distortion CSS h2 { color : darkorange ; font-family : sans-serif ; font-size : 3.5em ; text-transform : uppercase ; text-shadow : -3px -3px 0 cyan , 3px 3px 0 pink ; }
Post a Comment
Read more

Best Top 5 Text Editors for Mac, Windows and Linux

Text editors make it easy to code without formatting issues corrupting it. For people new to programming learn the hard way that their first choice for coding causes problems with the code itself, such as not properly displaying formatting. Text editors shouldn't just be simple but also functional and good to work with. A text editor should be easy to use and do the job the way it was intended to be done. Below are the best top 5 text editors that should enough to make the job done. 1. Visual Studio Code Free. Built on open source. Runs everywhere.  Official Website 2. Brackets A modern, open source text editor that understands web design. Official Website 3. Sublime Text A sophisticated text editor for code, markup and prose. Official Website 4. Atom A hackable text editor for the 21st Century Official Website 5. Espresso For people who make delightful, innovative and fast websites, helps you write, code, design, build and publish with flair and efficiency.  Official Website ...
Post a Comment
Read more