为什么我的图像在显示弹性的媒体查询中拉伸

时间：2017-06-17 21:58:47

标签： css responsive-design flexbox

我有一个带有一类author-pic的图像，它的工作方式我想要它，除了在第二个到最后一个媒体查询它水平拉伸时，设置了display flex。我知道你不应该对显示flex的孩子使用％，但是author-pic不是直接的孩子，这是否意味着你在使用display flex时不能对任何孩子使用％？如果是这样我怎么能解决这个问题，因为flex-basis似乎也没有用，我假设因为作者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%;
        }

    }

2 个答案:

答案 0 :(得分：1)

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

答案 1 :(得分：1)

使用align-items。默认值为stretch，此处将应用此值。您似乎想要使用flex-start。

＆＃13;
＆＃13; 
/*************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;
  }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题