html - Flexbox/CSS/响应式网页设计图像

Question

我正在使用 css/flexbox 编写一个着陆页，我正在努力让一些图像大小相等。我拥有的 Logo 图像尺寸各不相同，我希望它们大小相同，可点击链接。我能够通过创建一个 css 表来实现这一点，但如果可能的话，我真的很想使用 flexbox。

这里是有问题的代码:

.how-to-buy {
      /*rgba used to add opacity*/
      background-color: rgba(255,255,255,0.4);
      border: hidden;
      border-radius: 25px;
      /* make sure there is space between buttons and bottom of page */
      margin-bottom: 30px;
      padding: 10px;
      max-width: 90%;
      text-align: center;
    }

    .ebook-links img {
      border-radius: 15px;
    }

    .ebook-links img:hover {
    }

    .how-to-buy{
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
    }

    .ebook-links{
      max-width: 80%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .logo1{ flex: 2.07;}
    .logo2{ flex: 2.4;}
    .logo3{ flex: 3;}
    .logo4{ flex: 2.8;}
    .logo5{ flex: 2.43;}

<div class="how-to-buy">
        <p>This collection includes nineteen tales of faeries and magic at Midwinter. Available Now online:</p>
        <div class="ebook-links">
    	    <a href=#>
    	      <img class="logo1" src="https://tinypandabird.wpengine.com/wp-content/uploads/2017/12/amazon-logo_black-300x145.png" /></a>
    	    <a href=#>
    		    <img class="logo4" src="https://tinypandabird.wpengine.com/wp-content/uploads/2017/12/ibooks-300x108.png" /></a>
        </div>
</div>

我认为将 Logo 的 flex 值设置为等于它们的纵横比会起作用，但似乎...

Answer 1

如果你只给 img 标签设置 'width' 或 'height' ，你把 max-height 放在 img 标签上怎么样，图像不会丢失纵横比

.how-to-buy {
      /*rgba used to add opacity*/
      background-color: rgba(255,255,255,0.4);
      border: hidden;
      border-radius: 25px;
      /* make sure there is space between buttons and bottom of page */
      margin-bottom: 30px;
      padding: 10px;
      max-width: 90%;
      text-align: center;
    }
    .ebook-links img {
      border-radius: 15px;
      max-height:50px;
    }

    .ebook-links img:hover {
    }

    .how-to-buy{
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
    }

    .ebook-links{
      max-width: 80%;
    
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .logo1{ flex: 2.07;}
    .logo2{ flex: 2.4;}
    .logo3{ flex: 3;}
    .logo4{ flex: 2.8;}
    .logo5{ flex: 2.43;}

<div class="how-to-buy">
        <p>This collection includes nineteen tales of faeries and magic at Midwinter. Available Now online:</p>
        <div class="ebook-links">
    	    <a href=#>
    	      <img class="logo1" src="https://tinypandabird.wpengine.com/wp-content/uploads/2017/12/amazon-logo_black-300x145.png" /></a>
    	    <a href=#>
    		    <img class="logo4" src="https://tinypandabird.wpengine.com/wp-content/uploads/2017/12/ibooks-300x108.png" /></a>
        </div>
</div>

希望这就是你要的结果