responsive-image

index.html

<!-- <div class="wrapper">
  <div class="card-image"> 
  <img  src=https://images.unsplash.com/photo-1535141192574-5d4897c12636?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1976&q=80>
  </div>
  <p> donate your clothes today
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis magnam ea corrupti est vel quae harum fugit odio maiores eaque.</p>
        
<div>  -->


<div class="wrapper">
  <div class="card-image">
    <img src="https://images.unsplash.com/photo-1535141192574-5d4897c12636?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1976&q=80">
  </div>
</div>

responsive-image.markdown

responsive-image

A Pen by Karla Grajales on CodePen.

License.

style.css

.wrapper {
 width: 50%;
 background-color: yellow;
 margin: auto;
  position: absolute;
  
}

.card-image {
  width: 75%;
/*   padding-bottom: 10%; */
  position: relative;
  
  
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}