Question

我正在使用css / flexbox编写登录页面，但我正努力使某些图像大小相等。我拥有的徽标图像大小各不相同，我希望它们大小相等，可单击链接。我可以通过创建一个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>

我认为将徽标的flex值设置为与纵横比相等是可以的，但似乎不行。

Answer 1

如果将max-height设置为img标签，如果仅将img标签设置为“ width”或“ height”，则图像不会失去长宽比

.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>

希望这是您要寻找的结果

Flexbox / CSS /自适应Web设计图像

1 个答案: