使用 flex 拉伸图像

Question

当我使用 flex 时，出现多个图像一起变形的问题。尝试了 align-self 和 align-items，但没有用。

html/css:

#lastf footer{
 background:#090D19;
 padding-top: 20px;
 display: flex;
 flex-wrap: wrap;
}

#lastf h3{
 text-align: center;
 width:100%;
 background-color: #4B7992;
 padding:30px 0px;
}

#lastf footer img{
 flex:1;
 padding:20px 20px;
 width:1.3in;
 height: 1.3in;
 align-items: center;
}

<section id="lastf">
  <footer>

   <h3>Share the trailer with your friends!</h3>

   <img src="images/fb.png" alt="Facebook" >

   <img src="images/twitter.jpg" alt="Twitter" >

   <img src="images/instagram.jpg" alt="Instagram" >

  </footer>
 </section>

Answer 1

这是代码。希望它能帮助你。如果有任何变化请告诉我。

#lastf footer {
  background: #090D19;
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#lastf h3 {
  text-align: center;
  width: 100%;
  background-color: #4B7992;
  padding: 30px 0px;
}

#lastf footer img {
  /*flex: 1;*/
  padding: 20px 20px;
  /*width: 1.3in;
  height: 1.3in;*/
  align-items: center;
}

<section id="lastf">
  <footer>

    <h3>Share the trailer with your friends!</h3>

    <img src="https://picsum.photos/200/300" alt="Facebook">

    <img src="https://picsum.photos/200/300" alt="Twitter">

    <img src="https://picsum.photos/200/300" alt="Instagram">

  </footer>
</section>

Answer 2

<style>
#lastf footer{
 background:#090D19;
 padding-top: 20px;
 display: flex;
 flex-wrap: wrap;
}

#lastf h3{
 text-align: center;
 width:100%;
 background-color: #4B7992;
 padding:30px 0px;
}

#lastf footer a{
 padding:5px;
    display: table-cell;
}
</style>

<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<section id="lastf">
  <footer>

   <h3>Share the trailer with your friends!</h3>

   <a href="#" class="fa fa-facebook"></a>
   <a href="#" class="fa fa-twitter"></a>
            <a href="#" class="fa fa-instagram"></a>
   
  </footer>
 </section>
  </body>

使用 flex 拉伸图像

Images stretching with flex

html

css

image

dreamweaver

flexbox