Responsive images with aspect ratio without any media queries

Creating responsive images with aspect ratio without using media queries can be achieved using a combination of CSS Flexbox and the aspect-ratio property. Here’s how you can do it:

Step #1:- Html Page

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Images with Aspect Ratio</title>
<style>
  .image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }

  .image-container img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 16 / 9; /* Change the aspect ratio as needed */
  }
</style>
</head>
<body>
  <div class="image-container">
    <img src="image.jpg" alt="Example Image">
  </div>
</body>
</html>

Output:-

Output 2:-

Hopefully, It will help you …!!!

Related Posts

Maximizing Mobility: Vehicle Rentals and Owner Opportunities in Africa

Transportation shapes how people experience Africa, from business travelers navigating major urban centers to tourists exploring scenic coastal roads. Whether you need reliable transport for a weekend…

Read More

How to Choose and Use Vehicle Rental Management Software in Europe

Managing a vehicle rental fleet—whether you run a small fleet of scooters in Athens, a motorcycle tour company in the Alps, or a local car hire business…

Read More

MyEventsNow USA: A Complete Guide for Attendees and Organizers

Maya opened her laptop on a Tuesday night. She wanted to plan a fun weekend for her friends. One friend wanted live music. Another wanted comedy. A…

Read More

How DataOps Improves Decision Making in Enterprises

Enterprise decision-making rarely fails because leaders lack data. It fails because the data they receive arrives too late, lacks context, or cannot be trusted. A sales report…

Read More

Manufacturing Analytics Optimization with DataOps

Manufacturing plants generate more data than ever—historian tags, MES records, PLC signals, quality measurements—yet most of it never reaches a decision that improves the line. The gap…

Read More

How TheDataOps.org Guides Automation in Analytics Teams

Analytics teams often face a stubborn paradox: the more data they manage, the less time they spend on analysis that actually matters. Manual checks, repeated report rebuilding,…

Read More
Subscribe
Notify of
guest
0 Comments
Oldest
Newest Most Voted
0
Would love your thoughts, please comment.x
()
x