为什么我的图像在带有 display flex 的媒体查询中拉伸答案

【问题标题】：Why is my image stretching at the media query with display flex为什么我的图像在带有 display flex 的媒体查询中拉伸
【发布时间】：2017-11-20 10:37:20
【问题描述】：

我有一个带有 author-pic 类的图像，它按我想要的方式工作，除了在倒数第二个媒体查询中，当设置了 display flex 时，它会水平拉伸。我知道您不应该对 display flex 的孩子使用 %，但是 author-pic 不是直接孩子，这是否意味着您在使用 display flex 时不能对任何孩子使用 % ？如果是这样，我该如何解决这个问题，因为 flex-basis 似乎也不起作用，我假设因为 author-pic 不是直接的孩子。

https://jsfiddle.net/svb0gxgg/2/

    @media screen and (min-width: 400px){
        .author-pic{
            min-width: 300px;
            width: 25%;
            height: 25%;
            float: left;
            margin: 0 .5em;
            }
        section h2{
            font-size: 1.5em;
        }
        section h3{
            font-size: 1.3em;
        }
        /***home page***/
        .home-page-greeting{
            font-size: 1.8rem;
        }
        .front-of-book-front,
        .back-of-book-front,
        .book-front,
        .book-back,
        .book{
            width: 113px;
            height: 180px;
            }

        .front-of-book-front:before{
            width: 133px;
            height: 17px;
            transform: translate(8px,105px) rotate(90deg);
            -moz-transform: translate(8px,105px) rotate(90deg);
        }

        .front-of-book-front:after{
            width: 83px;
            height: 14px;
            transform: translate(0,21px);
            -moz-transform: translate(0,21px);
        }
        .bar{
            width: 95px;
            height: 10px;
            background-color: rgba(0,0,0,.8);
            font-size: .3em;
            color: white;
            text-align: right;
            transform: rotate(90deg) translate(42px,-45px);
            -moz-transform: rotate(90deg) translate(42px,-45px);
             }
        .book-back p{
            font-size: .4rem;
            margin: 2.9em 1.9em;
        }
        .book-side{
            width: 176px;
            height: 10px;
            top:-3px;
            }
        header{
                height: 130px;
                display: flex;
                justify-content: center;
            }
          header h1{
                    font-size: 2em;
                    align-self: flex-start;
                    white-space: nowrap;
                    border: 8px solid black;
                }
         header nav{
                    display: block;
                    align-self: flex-end;
                    position: initial;
                    width: initial;
                }
          .main-nav{
                    display: flex;
                    justify-content: flex-end;
                    width:initial;
                }
         .main-nav li{
                    border-radius: 8px;
                    padding: 5px;
                    font-size: 1.3rem;
                    background-color: transparent;
                    margin: 0 4px;
                    width:initial;
                }
        .drop-menu{
            top: 34px;
        }
        .drop-menu li{
            margin: 0;
            border-radius: 0;
        } 
        /***charactor page*****/
    .character-pic{
        width: 25%;
        height: 25%;
    }
    }

    @media screen and (min-width:860px){
        body{
            background-position: center;
        }
        header{
            height: 120px;
            justify-content: space-between;
        }
        header h1{
            margin: 0 0 0 20px;
        }
        .main-nav li{
            font-size: 1.5rem;
        }
        header nav{
            margin: 0 40px 0 0;
            width: initial;
        }
        .drop-menu{
            top: 38px;
        }
        section h2{
            font-size: 1.8em;
        }
        /***home page***/
        .amazonBookLabel{
            font-size: 1.5em;
        }
        /**home page book**/
        .front-of-book-front,
        .back-of-book-front,
        .book-front,
        .book-back,
        .book{
            width: 200px;
            height: 320px;
            }
        .front-of-book-front{
            perspective: 200px;
        }
        .front-of-book-front:before{
            width: 234px;
            height: 37px;
            transform: translate(11px,185px) rotate(90deg);
            font-size: 1em;
            line-height: 37px;
        }

        .front-of-book-front:after{
            width: 146px;
            height: 26px;
            transform: translate(0,32px);
        }
        .bar{
            width: 172px;
            height: 23px;
            background-color: rgba(0,0,0,.8);
            font-size: .3em;
            color: white;
            text-align: right;
            transform: rotate(90deg) translate(74px,-82px);
            font-size: .7em;
             }
        .bar p{
            display: block;
            padding: 12px 5px 0 0;
        }
        .book-side{
            width: 312px;
            height: 10px;
            top:-1px;
            left: -5px;

            }
        .book-back p{
            font-size: .7em;
            margin: 3.3em 2.3;
        }
        /*****author page******/

        .authorWrapper{
            display: flex;
            margin: auto;
        }
        .authorWrapper :nth-child(1){
            flex-basis: 75%;
        }
        .authorWrapper :nth-child(2){
            flex-basis: 25%;
        }

    }

【问题讨论】：

标签： css responsive-design flexbox

【解决方案1】：

如果您希望图像正确缩放，您只需使用宽度或仅使用高度。您的图像看起来很奇怪，因为您将高度设置为 25%。删除它，它应该可以工作。如果您需要同时使用两者，请确保您的比例正确，例如 4:3

【讨论】：

【解决方案2】：

使用align-items。默认值为stretch，在此应用。看起来你想改用flex-start。

/*************general*********************/

html,
body {
  min-height: 100vh;
}

body {
  margin: 0px;
  // background-image: linear-gradient( 0, rgba(0,0,0,.8) 30%, rgba(0,150,255,.8) 100%), url("images/mainCover.jpg");
  -moz-background-image: linear-gradient( 0, rgba(0, 0, 0, .8) 30%, rgba(0, 150, 255, .8) 100%), url("images/mainCover.jpg");
  background-position: 40%;
  background-repeat: no-repeat;
  background-size: cover;
}

img {
  max-width: 100%;
}

h1,
h2,
h3 {
  font-family: arial;
  text-align: center;
  margin: 20px auto;
}

ul {
  list-style: none;
  text-align: center;
  padding: 0;
}

a:visited,
a {
  color: black;
}

section {
  margin: 1%;
  color: white;
}

section > article {
  padding: 1em;
  background-color: rgba(0, 0, 0, .5);
  border-radius: 15px;
  margin: 10px;
}

section h2,
section h3 {
  text-align: center;
}

section h2 {
  font-size: 1.3em;
  text-shadow: 3px 3px 3px rgba(0, 0, 0, .5);
}

section h3 {
  font-size: 1.1em;
}

article:after {
  content: "";
  display: block;
  clear: both;
}


/*nav and header*/

header {
  background-color: rgba(255, 165, 0, .8);
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  border-bottom: 8px solid black;
}

header h1 {
  text-align: center;
  margin: 0;
  padding: 15px;
  font-size: 1.5em;
  text-shadow: 5px 5px 5px rgba(0, 0, 0, .3);
}

header h1,
nav a {
  font-weight: 700;
  font-family: arial;
}

header nav {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 1;
  // background-color: rgba(255,165,0,.8);
}

.main-nav {
  margin: 0;
  width: 100%;
  color: white;
  font-family: arial;
  font-weight: 600;
}

nav ul li {
  text-align: center;
  border: 1px solid white;
  border-radius: 15px;
  font-size: 1.2rem;
  background-color: rgba(255, 165, 0, .8);
  width: 100%;
}

.drop-menu-back {
  display: none;
  width: 100%;
}

a {
  text-decoration: none;
}

nav a:visited,
nav a,
h1 {
  color: white;
}

.main-nav .current-page {
  background-color: rgba(0, 0, 0, .5);
}


/****drop down menu****/

.characters:hover {
  position: relative;
  border-radius: 8px 8px 0 0;
}

.drop-menu {
  position: absolute;
  visibility: hidden;
  display: block;
  top: 38px;
  white-space: nowrap;
  left: -2px;
  background-color: rgba(255, 165, 0, .8);
  border: 1px solid rgba(0, 0, 0, .02);
  box-shadow: 5px 5px 5px 2px rgba(0, 0, 0, .3);
  opacity: 0;
  transition: opacity 300ms ease-in-out 0s;
  z-index: 1;
}

.characters:hover .drop-menu {
  visibility: visible;
  opacity: 1;
}


/*******************home page*********************/

.home-page-greeting {
  color: white;
  text-align: center;
  text-shadow: 3px 3px 5px rgba(0, 0, 0, 1);
}

.bookWrapper {
  width: 25%;
  margin: auto;
}

.bookLink {
  display: block;
  margin: auto;
}

.bookImage {
  margin: 35px auto;
  display: block;
  //max-height: 300px;
}

.amazonBookLabel {
  background-color: rgba(0, 0, 0, .5);
  color: white;
  padding: 10px;
  font-weight: 600;
  border-radius: 20px;
  margin: 30px auto;
  text-align: center;
  position: relative;
  max-width: 200px;
}

.amazonBookLabel:after {
  content: "";
  width: 30px;
  height: 5px;
  background-color: rgba(0, 0, 0, .5);
  position: absolute;
  bottom: -5px;
  left: calc(50% - 17px);
}

.amazonBookLabel:before {
  content: "";
  width: 0;
  height: 0;
  border-left: 40px solid rgba(0, 0, 0, .5);
  border-top: 40px solid transparent;
  position: absolute;
  bottom: -45px;
  transform: rotate(-45deg);
  transform-origin: top left;
  left: calc(50% - 30px);
}


/***home page book***/

.front-of-book-front,
.back-of-book-front,
.book-front,
.book-back,
.book {
  width: 100px;
  height: 160px;
  position: relative;
  perspective: 800px;
}

.book {
  margin: 52px auto;
  transition: transform 1s ease-in-out 0s;
  -moz-transition: transform 1s ease-in-out 0s;
}

.book-front {
  position: relative;
  transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-origin: left;
  -moz-transform-origin: left;
  transition: transform 1s ease-in-out 0s;
  -moz-transition: transform 1s ease-in-out 0s;
  box-shadow: 0px 3px 5px 2px rgba(0, 0, 0, .5);
  perspective: 400px;
  perspective-origin: -200px;
}

.front-of-book-front {
  background-image: url("images/mainCover.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 47%;
  backface-visibility: hidden;
}

.front-of-book-front:before {
  content: "Seraph Chronicles: Evangelion";
  text-shadow: 2px 2px 1px rgba(0, 0, 0, .5);
  font-size: .5em;
  line-height: 15px;
  color: white;
  width: 119px;
  height: 15px;
  background-color: rgba(255, 165, 0, .5);
  position: absolute;
  text-align: center;
  transform: translate(8px, 93px) rotate(90deg);
  -moz-transform: translate(8px, 93px) rotate(90deg);
}

.front-of-book-front:after {
  content: "";
  width: 75px;
  height: 12px;
  background-color: rgba(255, 165, 0, .5);
  position: absolute;
  transform: translate(0px, 19px);
  -moz-transform: translate(0px, 19px);
}

.bar {
  width: 80px;
  height: 8px;
  background-color: rgba(0, 0, 0, .8);
  font-size: .3em;
  color: white;
  text-align: right;
  transform: rotate(90deg) translate(36px, -45px);
  -moz-transform: rotate(90deg) translate(36px, -45px);
}

.bar p {
  padding: 2px 3px 0 0;
  display: block;
}

.back-of-book-front {
  backface-visibility: hidden;
  background-color: rgb(240, 234, 214);
  transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  position: absolute;
  top: 0;
}

.book-front:hover {
  transform: rotatey(-180deg);
}

.book:hover {
  transform: rotate(10deg);
}

.book-back {
  position: absolute;
  top: 0;
  background-color: rgb(240, 234, 214);
  z-index: -1;
  box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, .5);
  text-align: justify;
}

.book-back p {
  font-size: .3rem;
  margin: 2.9em 1.9em;
}


/**********author page********/

.author-pic {
  display: block;
  margin: auto;
  width: 200px;
  ;
}

section article {
  padding: 1em;
  background-color: rgba(0, 0, 0, .5);
  border-radius: 15px;
  margin: 10px;
  clear: both;
}

address {
  margin: 15px auto;
  width: 125px;
  font-family: arial;
}

.email {
  background-image: url("images/mail-icon.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 50%;
}

.email a,
.facebook a,
.email:visited,
.facebook:visited {
  color: white;
  font-style: normal;
  font-weight: 500;
}

address a {
  display: block;
  line-height: 19px;
}

.facebook {
  background-image: url("images/facebook-icon.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 0 50%;
}


/*******characters page********/

.charater-pic {
  width: 100%;
}


/***responsive***/

@media screen and (max-width: 400px) {
  .drop-menu {
    top: -97px;
    width: 100%;
  }
  .drop-menu-back {
    display: block;
    width: 100%;
    position: relative;
    line-height: 22px;
  }
  .characters:hover {
    border-radius: 15px;
  }
  .drop-menu-back span {
    padding: 0;
    font-size: .8em;
    margin: 0 .5em 0 0;
  }
  .drop-menu {
    background-color: transparent;
  }
  footer {
    height: 100px;
  }
}

@media screen and (min-width: 400px) {
  .author-pic {
    min-width: 300px;
    width: 25%;
    height: 25%;
    float: left;
    margin: 0 .5em;
  }
  section h2 {
    font-size: 1.5em;
  }
  section h3 {
    font-size: 1.3em;
  }
  /***home page***/
  .home-page-greeting {
    font-size: 1.8rem;
  }
  .front-of-book-front,
  .back-of-book-front,
  .book-front,
  .book-back,
  .book {
    width: 113px;
    height: 180px;
  }
  .front-of-book-front:before {
    width: 133px;
    height: 17px;
    transform: translate(8px, 105px) rotate(90deg);
    -moz-transform: translate(8px, 105px) rotate(90deg);
  }
  .front-of-book-front:after {
    width: 83px;
    height: 14px;
    transform: translate(0, 21px);
    -moz-transform: translate(0, 21px);
  }
  .bar {
    width: 95px;
    height: 10px;
    background-color: rgba(0, 0, 0, .8);
    font-size: .3em;
    color: white;
    text-align: right;
    transform: rotate(90deg) translate(42px, -45px);
    -moz-transform: rotate(90deg) translate(42px, -45px);
  }
  .book-back p {
    font-size: .4rem;
    margin: 2.9em 1.9em;
  }
  .book-side {
    width: 176px;
    height: 10px;
    top: -3px;
  }
  header {
    height: 130px;
    display: flex;
    justify-content: center;
  }
  header h1 {
    font-size: 2em;
    align-self: flex-start;
    white-space: nowrap;
    border: 8px solid black;
  }
  header nav {
    display: block;
    align-self: flex-end;
    position: initial;
    width: initial;
  }
  .main-nav {
    display: flex;
    justify-content: flex-end;
    width: initial;
  }
  .main-nav li {
    border-radius: 8px;
    padding: 5px;
    font-size: 1.3rem;
    background-color: transparent;
    margin: 0 4px;
    width: initial;
  }
  .drop-menu {
    top: 34px;
  }
  .drop-menu li {
    margin: 0;
    border-radius: 0;
  }
  /***charactor page*****/
  .character-pic {
    width: 25%;
    height: 25%;
  }
}

@media screen and (min-width:860px) {
  body {
    background-position: center;
  }
  header {
    height: 120px;
    justify-content: space-between;
  }
  header h1 {
    margin: 0 0 0 20px;
  }
  .main-nav li {
    font-size: 1.5rem;
  }
  header nav {
    margin: 0 40px 0 0;
    width: initial;
  }
  .drop-menu {
    top: 38px;
  }
  section h2 {
    font-size: 1.8em;
  }
  /***home page***/
  .amazonBookLabel {
    font-size: 1.5em;
  }
  /**home page book**/
  .front-of-book-front,
  .back-of-book-front,
  .book-front,
  .book-back,
  .book {
    width: 200px;
    height: 320px;
  }
  .front-of-book-front {
    perspective: 200px;
  }
  .front-of-book-front:before {
    width: 234px;
    height: 37px;
    transform: translate(11px, 185px) rotate(90deg);
    font-size: 1em;
    line-height: 37px;
  }
  .front-of-book-front:after {
    width: 146px;
    height: 26px;
    transform: translate(0, 32px);
  }
  .bar {
    width: 172px;
    height: 23px;
    background-color: rgba(0, 0, 0, .8);
    font-size: .3em;
    color: white;
    text-align: right;
    transform: rotate(90deg) translate(74px, -82px);
    font-size: .7em;
  }
  .bar p {
    display: block;
    padding: 12px 5px 0 0;
  }
  .book-side {
    width: 312px;
    height: 10px;
    top: -1px;
    left: -5px;
  }
  .book-back p {
    font-size: .7em;
    margin: 3.3em 2.3;
  }
  /*****author page******/
  .authorWrapper {
    display: flex;
    margin: auto;
    align-items: flex-start;
  }
  .authorWrapper:nth-child(1) {
    flex-basis: 75%;
  }
  .authorWrapper:nth-child(2) {
    flex-basis: 25%;
  }
}

@media screen and (min-width: 1109px) {
  header h1 {
    font-size: 3em;
    margin: 0 0 0 80px;
  }
  .main-nav > li {
    margin: 0 8px;
  }
  header nav {
    margin: 0 80px 0 0;
  }
  /***home page***/
  .home-page-greeting {
    font-size: 2.5rem;
  }
}

<header>
  <h1>Seraph Chronicles</h1>
  <nav>
    <ul class="main-nav">
      <li class="main-nav-item"><a href="index.html">Home</a></li>
      <li class="main-nav-item"><a href="about.html">About</a></li>
      <li class="main-nav-item characters">
        <a href="characters.html">Characters</a>
        <ul class="drop-menu">
          <li class="drop-menu-back"><span class="material-icons">arrow_back</span>Back</li>
          <li><a href="ethanClarke.html">Ethan Clarke</a></li>
          <li><a href="serenaKiriaga.html">Serena Kiriaga</a></li>
          <li><a href="MarcusFlynn.html">Marcus Flynn</a></li>
          <li><a href="EmilyAshdown.html">Emily Ashdown</a></li>
          <li><a href="MilesWest.html">Director Miles West</a></li>
        </ul>
      </li>
      <li class="main-nav-item current-page"><a href="auther.html">Author</a></li>
    </ul>
  </nav>
</header>
<main>
  <section>
    <div class="authorWrapper">
      <article class="aboutAuthor">
        <h2>About the Author</h2>
        <img src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" alt="picture of author, Kyle Feller" class="author-pic">
        <p>sd t yghjiu hgfdwert yuikjn dnmkjhjh jhbnjhn jhnjhnmkjn mkjhnjhn mkjhnmkjn mkjn mkwjnedkj njhbnkjnmkj nmkjnm kjnmkjnmkj hnmkjnmk jnmjhbcnk jcbnjkj bnkjnbnk jnkjnnk jnkj nkj nknk jn nkjn bnkjnbnkm nnmknmkmn kjnkmnkjnmkj nmjnjnmk jnmjnmkjnb jxncbcjbnkj
          nbnjkjhb njhnbkj njnbnkjnk jnmjhnmjn mkjnmjnm jnjnbnmjnj njhnmkjh nbnjnbnk jnbnjkjnj kjnkjnkjn kjnbnkjnbn kjnbnkj nbnkjn nknbnjnb nkjnbnmnn kjnnmmn kjnkmnkj mnkjnkjn nkjmnkjm nkjmnkm jcncc ncncncncnc ncnc ncnncnc ncncnc
        </p>
      </article>
      <article>
        <h2>Contact Me</h2>
        <ul>
          <li><address class="email"><a href="mailto:Kylemcbride101@yahoo.com?subject=Seraph Chronicles">Email Me</a></address></li>
          <li><address class="facebook"><a href="https://www.facebook.com/kyle.j.feller"> Follow Me</a></address></li>
        </ul>
      </article>
    </div>
  </section>
</main>
<footer>
</footer>

【讨论】：

谢谢这很有趣，我有点困惑，问题是我声明了一个高度，但这也有效。 align-items 沿交叉轴对齐事物，当它这样做时，它会用一些 flex 默认值覆盖高度，如果是这样，为什么它不使用宽度呢？我正在尝试这是如何工作的。
@alexis hmm...我没有注意到图片上的height，我只是认为这是一个弹性框stretch 问题，所以我切换了align-items 并且它起作用了，所以我把它留在那里。但这甚至不应该是问题......如果图像的父级是flex，图像应该只有stretch - 而不是，图像的父级是flex。老实说，我不完全确定：-/ 虽然使用align-items（如果你想要的话）的一个好处是你的“联系我”部分将符合内容的大小，而不是拉伸以匹配高度父母的。
是的，图像正在拉伸，因为高度以 % 为单位，并且恰好比宽度小，谢谢，虽然你解决了下一件事，我要去工作，这是联系我，如果我弄清楚为什么效果不好，请尝试在 cmets 中发帖