CODEWITHSUNDEEP
htmlcss
Joelad
Joelad

Reputation: 490

Responsive images using wagtail image tag

I want an image to sit in a div which is 50% screen width ( with max width 800px for image in div) until 640px screen width where the div is 100%. I want the image to change height and width with the div. I want the whole image to always be shown. At the minute neither is changing and its messing up the responsiveness of the whole page. Everything is being pushed to the right.

<tr class="fadeInBlock">
  <td>
    <!--div for image of architecture-->
    <div class="homeInfo5">
      {{ page.architecturalText|richtext }}
    </div>


  </td>
  <td>
    <div class="homeIm4">
      {% for item in page.gallery_images.all %} {% image item.image width-500 class="responsive"%}
      <p>{{ item.caption }}</p>
      {% endfor %}
    </div>
  </td>
</tr>

.homeIm4 {
    height: auto;
    float: left;
}

.responsive {
  width: 100%;
  max-width: 250px;
  height: auto;
}


@media all and (max-width:640px) {
  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
  }
}

In the image tag I have tried min max width original and fill. Nothing I've tried has worked. Without the image the responsiveness of the page is fine with just the text field.

I know about this link but it hasnt helped. https://www.w3schools.com/howto/howto_css_image_responsive.asp

Upvotes: 1

Views: 868

Answers (1)

Sunil R.
Sunil R.

Reputation: 881

Add img{max-width:100%;} using a parent div

Upvotes: 1

Related Questions