Search code examples
cssresponsive-designmedia-queries

CSS media-query to squeeze image into container

I am forced to work with a table-based layout and need to make it responsive. Am struggling with images: when the image-width exceeds the screen-width, it should shrink to fit on the screen. In several articels here I found max-width being recommended, but somehow I'm not getting it to work.

Here's my code:

.headerImg { max-width: 100%; }
@media (max-width: 600px) {        
    .mainTabWidth {width: 100%;}   
    .halfWitdth   {width:  50%;}
    .qWidth       {width:  25%;}
}
@media (min-width: 601px)  {        
    .mainTabWidth {width: 594px;}   
     .halfWidth    {width: 236px;}
     .qWidth       {width: 113px;}
}
  <body style="font-family: Arial;font-size: 12pt;margin:0px;">
      <table align="center" border="0" cellpadding="0" cellspacing="0"
      style="border-collapse: collapse;" class="mainTabWidth">
        <tbody>
        <tr>
        <td style="padding: 10px;">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.    
        </td>
        </tr>
          <tr>
            <td><img src="http://mbaas.de/wordle.png" class=
            "headerImg" /></td>
          </tr>
        </tbody>
      </table>
    </body>

I have also set up a fiddle (full-screen here).

Solution

  • It's a better approach to change the order of your media queries in this case, plus regarding your image

    when the image-width exceeds the screen-width, it should shrink to fit on the screen.

    here what you need to do:

    .mainTabWidth {
  table-layout: fixed;
}
.headerImg {
  max-width: 100%;
}
@media (min-width: 601px) {
  .mainTabWidth {
    width: 594px;
  }
  .halfWidth {
    width: 236px;
  }
  .qWidth {
    width: 113px;
  }
}
@media (max-width: 600px) {
  .mainTabWidth {
    width: 100%;
  }
  .halfWitdth {
    width: 50%;
  }
  .qWidth {
    width: 25%;
  }
}
    <body style="font-family: Arial;font-size: 12pt;margin:0px;">
  <table align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;" class="mainTabWidth">
    <tbody>
      <tr>
        <td style="padding: 10px;">
          <img class="headerImg" src="http://lorempixel.com/1000/300" />
        </td>
      </tr>  
      <tr>
        <td style="padding: 10px;">This text is embedded in a cell of table-row where the table is styled with a media-query, in the width is >607px, the table should be 594px wide and on smaller screens (max-width: 600px), the table should fill the available space to a 100%. But
          if you resize and observe, you will see the contrary: on large screens, the table takes all space and on small screens it takes 594px - so it seems the wrong query is selected...??? Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
          diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
          ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
          takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
          dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
          sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</td>
      </tr>
    </tbody>
  </table>
</body>