<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Min width & Max width</title>
</head>
<body>
  <h2>AtulCodex</h2>
  <div class="box">
    <img src="https://source.unsplash.com/500x360/?car" alt="">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci voluptatum nulla suscipit eum nemo perferendis possimus eligendi dicta quo enim magnam repudiandae sit voluptatibus accusamus deserunt quisquam beatae vel eos veritatis a, maxime fuga explicabo cupiditate! Eos nostrum provident culpa repellat eveniet id odio amet quos nihil at non possimus nesciunt cumque suscipit, quidem labore, perferendis quibusdam modi sequi? Dolor laboriosam ipsum possimus ab sapiente qui voluptates nemo, harum quam deserunt provident molestias placeat obcaecati. Excepturi accusamus, quasi asperiores maiores libero cum iure quam fugit? Beatae earum cupiditate similique amet laborum dolorem ipsum reiciendis temporibus quibusdam! Atque odio vitae nemo.
  </div>
</body>
</html>
.box
{
  border: 2px solid red;
  min-width: 300px;
  max-width: 600px;
}

img
{
  width: 100%;
  height: auto;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.