Photoshop Question posted in
The official user guide can be found here.

How to create responsive images with fixed height within <img> tag? – Photoshop

I’m working on a website project where in the header section I have a grid of 6 images (2 rows with 3 images in each). It’s not a problem to make them responsive (kinda “liquid”) with max-width:100% and height:auto, however this website should be linked with some admin tool in the future, so the end user(s) could upload their own images.

Hence, I need to understand how keep these two rows of images responsive but at the same time give them a fixed height (in this case they should be 220px). When I crop the images and make them all equal in height (using Photoshop), everything works fine, but as soon as I use images with different height values, the grid starts to break. Is there any known workaround for this?
Thanks in advance!

Tags:

3

Answers


  1. 0

    Use percents and @media
    Example : 

    @media only screen and (min-width : 320px) {
   img {
      width:40%;
      height:60%; /*Images should be bigger in small devices*/
   }
}

 @media only screen and (min-width : 480px) {
  img {
      width:30%;
      height:55%;
  }
 }

    Please Note : The percent is calculated from parent. For example if you put an image in a div with width : 400px and height : 300px, it will show the image with 160px width and 180px height on device with min-height of 320px.

    max-height is another choice.

    Login or Signup to reply.
  2. 0

    If your goal is to keep the images (or their container’s) height fixed, that will mean that the images will not be stretching or contracting in a fluid way. Given that this concept is contradictory in practice, I will instead show you a ‘responsive’ solution that comes from making container elements themselves responsive rather than instead of the images.

    The case you’re referring to (2 rows 3 images) sounds like a great place to implement a cascading images look-and-feel. When the page width shrinks the images will float under each other whereas viceversa when the website width is stretched; this in essence achieves a fluid and responsive functionality without affecting the image heights themselves. The below code should apply the ‘building blocks’ you’ll be needing for in order to achieve this effect… granted there is a lot of custom work you can do here (like using background: cover, instead of img tags as suggested in the comments). Take a look and let me know if this helps you get closer to what you’re trying to achieve.

    HTML

    <div class="wrapper bg-purple center-div">
    <div class="img-container left">
      <img src="http://placehold.it/200x200"/>
    </div>
    <div class="img-container left">
      <img src="http://placehold.it/200x200"/>
    </div>
    <div class="img-container left">
      <img src="http://placehold.it/200x200"/>
    </div>
</div>

<div class="clear-both"></div>

<div class="wrapper bg-cyan center-div">
    <div class="img-container left">
      <img src="http://placehold.it/200x200"/>
    </div>
    <div class="img-container left">
      <img src="http://placehold.it/200x200"/>
    </div>
    <div class="img-container left">
      <img src="http://placehold.it/200x200"/>
    </div>
</div>

    CSS

    .wrapper { 
    display: table;
}
.img-container {
    height: 50px;
    padding: 2px;
}
.center-div {
    margin: 0 auto;
}
.left {
    float: left;
}
.clear-both {
    clear: both;
}
.bg-purple {
    background-color: purple;
}
.bg-cyan {
    background-color: cyan;
}

@media only screen and (max-width: 450px) {
  .left {
      clear: both;
  }
}
    Login or Signup to reply.
  3. 0

    Well, let’s see if I understood good enough your question (my bad english, not yours).

    If yoy want 2 rows, 220px height each with 3 images each filling the width of the row while keeping the same height as the parent, the problem you may have is that the images will distort to adapt to their responsive parent container.

    This may not work for you as even if your images are simillar in aspect ratio (height x width) once the window width is small (responsive) they will get distorted too much.

    Here is an example: I’ve use different sizes images some horizontal and some vertical so it can be easier to understand.

    Basic html:
<div class="header">
    <div class="row">
        <div class="img">
            <img src="" />
        </div>    
        <div class="img">    
            <img src="" />
        </div>    
        <div class="img"> 
            <img src="" />
        </div> 
    </div>
    <div class="row">
        <div class="img"> 
            <img src="" />
        </div>    
        <div class="img"> 
            <img src="" />
        </div>    
        <div class="img"> 
            <img src="" />
        </div> 
    </div>
</div>

    Please notice that the row is 240px insteed of 220 just so you can see easily the row (with red background) and I add for the same reason a white border to the image containers.

    FIDDLE

    The option I would try though is to make the images fit into the container without distortion, they will fit in height OR in width, but of course, they will leave space at the sides if it fit height or on top and bottom if fit in width but at least the images will be always centered in the container:

    the green color is the background of the images container:

    FIDDLE

    There may be better options but without the help of jquery I can’t help you more

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search