How to make a rectangle responsive image?-CodePudding

Literally what I am trying to achieve, is something like this.

For now it I have applied

max-width: 100%;
  height: auto;

and it is responsive for square image. You can check resizing the window in sandbox.
But how can I make a rectangle responsive image?
I tried with object-cover or object-contain but can't style as I'd like.

Here is the sandbox link and relevant code

.articleSection {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.articleSection img {
  max-width: 100%;
  height: auto;
}

Any help will be appreciated!

CodePudding user response：

So something like this? Using percentages for padding, width, and letting the height be automatic?

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

.sidebar-section {
  border: 1px solid #ccc;
  width: 300px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  margin-top: 30px;
}

.sidebar button {
  display: flex;
  gap: 5px;
  height: 20px;
  padding: 20px;
  border-radius: 5px;
  cursor: pointer;
  border-color: #ccc;
  align-items: center;
}

.content {
  border: 1px solid #ccc;
}

.bottomSection {
  border: 1px solid #ccc;
}

.articleSection {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

articleSection h5 {
  font-size: 20px;
  font-weight: 400;
  margin: 0;
}

.articleSection img {
  max-width: 100%;
  height: auto;
  width: 100%;
  padding: 10%;
}

@media screen and (min-width: 600px) {
  @supports (display: grid) {
    .site {
      display: grid;
      grid-template-columns: 1fr repeat(6, minmax(auto, 10em)) 1fr;
      grid-template-rows: minmax(1em, auto) 1fr auto minmax(1em, auto);
      gap: 20px;
    }
    .content {
      grid-column: 2/7;
    }
    .sidebar {
      grid-column: 7/8;
    }
  }
}

<html lang="en">

<head>
  <link href="style.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>

<body>
  <div id="wrapper">
    <section >
      <main >
        <section >
          <h5>Ad listing name</h5>
          <img src="https://via.placeholder.com/300x150" alt="ebay ad" />
          <article>
            <h6>description</h6>
            <p >
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea earum autem rerum hic, aliquam reiciendis! Qui nostrum, fugit ducimus aperiam natus repellendus autem, accusamus ut, dolores accusantium voluptate vero velit?
            </p>
          </article>
        </section>
      </main>
      <aside >
        <div >
          <button>
              <i  aria-hidden="true"></i>
              Write message
            </button>
        </div>
      </aside>
    </section>
  </div>
</body>

</html>