images not have same height-CodePudding

<article >
  <article >
    <img  src="//cdn.shopify.com/s/files/1/0306/3834/2281/files/videoImg1.png?v=423003316238239167" alt="image" />
    <div >Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi ratione odit voluptatum explicabo sit inventore, minima neque aliquam libero dolorem?</div>
    <footer >
      <a href="#" >Link</a>
      <a href="#" >Link</a>
    </footer>
  </article>

  <article >
    <img  src="https://picsum.photos/320/240" alt="image" />
    <div >Lorem ipsum dolor sit amet.</div>
    <footer >
      <a href="#" >Link</a>
      <a href="#" >Link</a>
    </footer>
  </article>

  <article >
    <img  src="https://picsum.photos/1024/768" alt="image" />
    <div >Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad, nam.</div>
    <footer >
      <a href="#" >Link</a>
      <a href="#" >Link</a>
    </footer>
  </article>
</article>

CodePudding user response：

Depending on whether you're using flex, grid or block elements - the issue could be coming from various properties. Presuming you have no CSS added in, in the <head> of your html, create a style block like <style></style>where you may want to add your styling properties, or you could extract these to an external file if you wish to. Have a look here for more information about css and how to use it .

Now back to your question, one way would be to simply add height and width properties to the <img /> tags so you'd do something like

img{
  width: 300px;
  height:200px;
  object-fit:contain;
}

object-fit: contain makes sure the image doesn't get stretched. If you'd like to see other possible solutions (such as grid or flex) please update your question

CodePudding user response：

You can add another div in img tag and give some specific height on it. also in your img give also height same as the div wrapper in your img. and do object-fit cover on it. check the code below

.cards {
  border: 1px solid red;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px
}

.card-image-wrapper {
  border: 1px solid yellow;
  height: 300px; /* add height to image wrapper */
 
}

.card-image {
   width: 100%;
   height: 300px; /* same height as card image wrapper */
   object-fit: cover;
   object-position: center;
}

      <article >
        <article >
          <div >
            <img
              
              src="//cdn.shopify.com/s/files/1/0306/3834/2281/files/videoImg1.png?v=423003316238239167"
              alt="image"
            />
          </div>
          <div >
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi ratione odit voluptatum explicabo sit inventore, minima neque aliquam libero dolorem?
          </div>
          <footer >
            <a href="#" >Link</a>
            <a href="#" >Link</a>
          </footer>
        </article>
        <article >
          <div >
            <img
              
              src="https://picsum.photos/320/240"
              alt="image"
            />
          </div>
          <div >
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi ratione odit voluptatum explicabo sit inventore, minima neque aliquam libero dolorem?
          </div>
          <footer >
            <a href="#" >Link</a>
            <a href="#" >Link</a>
          </footer>
        </article>
         <article >
          <div >
            <img
              
              src="https://picsum.photos/1024/768"
              alt="image"
            />
          </div>
          <div >
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi ratione odit voluptatum explicabo sit inventore, minima neque aliquam libero dolorem?
          </div>
          <footer >
            <a href="#" >Link</a>
            <a href="#" >Link</a>
          </footer>
        </article>
      </article>

hope it helps and give you little idea.