CODEWITHSUNDEEP
htmlcss
Naomi
Naomi

Reputation: 1298

Image size is not correct

I am trying to size 3 images to be the same width divided equally on one row.The last image is full size. It is also not changing the height on it. How come? 

.activity-snippets {
  display: flex;
}

.activity-post-link {
  height: 215px;
  width: 33.33333333%;
}
<div class="activity-snippets">
  <div class="activity-post-link">
    <img src="https://cdn.dribbble.com/users/476251/screenshots/2619255/attachments/523315/placeholder.png">
  </div>
  <div class="activity-post-link">
    <img src="https://cdn.dribbble.com/users/476251/screenshots/2619255/attachments/523315/placeholder.png">
  </div>
  <div class="activity-post-link">
    <img src="https://cdn.dribbble.com/users/476251/screenshots/2619255/attachments/523315/placeholder.png">
  </div>
</div>

Upvotes: 0

Views: 150

Answers (3)

satyajit rout
satyajit rout

Reputation: 1651

try this

.activity-snippets {
  display: flex;
}

.activity-post-link {
  height: 215px;
  width: 33.33333333%;
}
.activity-post-link img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
<div class="activity-snippets">
  <div class="activity-post-link">
    <img src="https://cdn.dribbble.com/users/476251/screenshots/2619255/attachments/523315/placeholder.png">
  </div>
  <div class="activity-post-link">
    <img src="https://cdn.dribbble.com/users/476251/screenshots/2619255/attachments/523315/placeholder.png">
  </div>
  <div class="activity-post-link">
    <img src="https://cdn.dribbble.com/users/476251/screenshots/2619255/attachments/523315/placeholder.png">
  </div>
</div>

Upvotes: 1

AA Shakil
AA Shakil

Reputation: 556

If the image size it not changing it may be because you have added class in the div element not in the image.

<div class="activity-snippets">
  <div>
    <img class="activity-post-link" src="https://cdn.dribbble.com/users/476251/screenshots/2619255/attachments/523315/placeholder.png">
   </div>

  <div>
    <img class="activity-post-link" src="https://cdn.dribbble.com/users/476251/screenshots/2619255/attachments/523315/placeholder.png">
   </div>

  <div>
    <img  class="activity-post-link" src="https://cdn.dribbble.com/users/476251/screenshots/2619255/attachments/523315/placeholder.png">
  </div>
</div>

Upvotes: 1

Bhuwan
Bhuwan

Reputation: 16855

Try to make use of max-width: 100% to the img tag. Using this image will take the width of parent container

.activity-snippets {
  display: flex;
}

.activity-post-link {
  height: 215px;
  width: 33.33333333%;
}

img {
  max-width: 100%;
}
<div class="activity-snippets">
  <div class="activity-post-link">
    <img src="https://cdn.dribbble.com/users/476251/screenshots/2619255/attachments/523315/placeholder.png">
  </div>
  <div class="activity-post-link">
    <img src="https://cdn.dribbble.com/users/476251/screenshots/2619255/attachments/523315/placeholder.png">
  </div>
  <div class="activity-post-link">
    <img src="https://cdn.dribbble.com/users/476251/screenshots/2619255/attachments/523315/placeholder.png">
  </div>
</div>

Upvotes: 4

Related Questions