Question

我有一个设计模型，看起来像这样 -

在某些视口中，手机图像，卡和文本不会保持其宽高比，并且内容会完全流出。我使用基于百分比的单位来保持响应，但它没有多大帮助。

以下是一个例子：

即使退出Mac上的全屏模式也会破坏布局：

我查了这个问题，但没有多大帮助 - Maintain the aspect ratio of a div with CSS

有没有更好的方法来解决这个问题并解决它？因为我现在唯一的解决方案是使用媒体查询来改变高度和宽度，但是除了一些视口之外它不能正常工作，主要是理想的全屏模式。

感谢您的帮助！我已经在这个问题上做了很长一段时间了，而且我还没有能够得到一致的解决方案。

指向网站的链接 - https://hackertronix.com/#projects

HTML：

<div class="card">
      <img src="images/murphy.png" class="phone-img">
      <div class="info-container">
           <div class="info-wrapper">
                <h2>
                    Murphy
                </h2>
                <h3>
                Murphy is a Peer-to-Peer, decentralized ATM platform
                that allows users to issue localized cash request broadcast within their peer network.
                Upon request acceptance the balance is settled via a wire transfer to the remitter's bank.
                The app makes use of geolocation features for allowing users to find each other.
                 </h3>
                 <div class="group">
                      <div class="left-icon">
                           <a target="_blank" href="http://github.com/Hackertronix/Project-Murphy">
                           <img src="images/checkOnGithub.png" class="github-googleplay-button">
                           </a>
                 </div>
                 <div class="right-icon">

                 </div>
           </div>
   </div>

CSS：

.card {
    opacity: 0;
    height: 100%;
    position: relative;
    z-index: 50;
    width: 100%;
}

.phone-img {
    position: relative;
    margin-left: 11%;
    margin-top: 6%;
    z-index: 50;
    height: 85%;
    width: auto;
}

.info-container {
    position: absolute;
    top: 20%;
    left: 25%;
    z-index: 49;
    width: 62%;
    height: 58%;
    background-color: white;
    border-top-right-radius: 1.125em;
    border-bottom-right-radius: 1.125em;
    box-shadow: 0 0.125em 0.9375em 0 rgba(0, 0, 0, 0.5);
}

.info-wrapper {
    width: 90%;
    height: 100%;
    margin-left: 30%;
    margin-top: 4%;
    margin-right: 5%;
    z-index: 49;
}

.info-container h2, .info-container h3 {
    color: #1f3264;
}

.info-container h2 {
    font-family: Graphik-Semibold, Roboto ;
    font-size: 2em;
    margin-bottom: 4%;
}

.info-container h3 {
    font-family: Graphik-Regular, Roboto;
    font-size: 1.3em;
    line-height: 1.57;
    font-weight: normal;
    margin-bottom: 4%;
    text-align: justify;
    width:70%;
}

.left-icon {
    float: left;
    width: 41%;
    position: relative;
    z-index: 50;
}

.right-icon {
    float: right;
    width: 59%;
    position: relative;
    z-index: 50;
}


/***media queries****/

@media screen and (min-width:20em)  {
     .card {
        display: none;
    }
}


@media screen and (min-width:64em) {
      .card {
        display: block;
    }

    .info-container {
        width:70%;
        left: 22%;
    }

    .phone-img {
        margin-left: 5%;
        margin-top: 7%;
    }

    .fp-slidesNav {
        display: block;
    }

    .info-container h2 {
        font-size: 3em;
    }

    .info-container h3 {
        font-size: 1.7em;
    }
}


@media screen and (min-width:70em) {
     .card {
        display: block;
    }

    .overlay nav {
        font-size: 4em;
    }

    .phone-img {
        margin-top: 6%;
    }
}

@media screen and (min-width: 80em) {
       .info-container h2 {
        font-size: 2em;
    }

    .info-container h3 {
        font-size: 1.3em;
    }

     .info-container {
        width:62%;
        left: 25%;
    }

    .phone-img {
        margin-left: 11%;
    }
}

CSS和响应式设计 - 维护卡片内容和图像的布局

0 个答案: