Question

我试图将图像放置在div旁边的文本旁边，以保持相同的比例。

这是当前的样子。如您所见，图像被拉伸到包含旁边文本的div高度。

这是HTML：

<body>

   <div id="content" class="content">
      <div id="title" class="title">
         Sports
      </div>
      <nav class="nav_bar">
         <ul>
            <li><a href="./index.html">Home</a></li>
            <li class="active"><a href="./sports.html">Sport</a></li>
            <li><a href="./academics.html">Academics</a></li>
            <li><a href="./other.html">Other</a></li>
            <li><a href="./stats.html">Stats</a></li>
         </ul>
      </nav>
      <div id="page_description" class="page_description">
         One of my main objectives for the first term of university was to get back my fitness. I decided to do this through going to the gym and playing futsal.
      </div>
      <div id="gym" class="main_container">
         <!-- Title, Hours, Description -->
         <div class="other_div">
            <div class="activity_title_hours">
               <div class="activity_title">
                  The Gym 
               </div>
               <div class="activity_hours">
                  - 5 Hours
               </div>
            </div>
            <hr class="hr_title_divider">
            <div class="activity_description">
               <p>
                  Lorem ipsum dolor sit amet, consectetur ultrices mauris ante consequat fusce adipiscing, tempor orci aliquam, eros rutrum gravida nec, quo augue lectus integer consequat. Vitae quis fringilla erat nunc ligula habitant. Tortor risus aliquam sodales 
               </p>
            </div>
         </div>
         <!-- Pic -->
         <div id="pic_container" class="pic_container">
            <img src="./images/gym.jpeg" class="pic" alt="The Gym logo"/>
         </div>
      </div>
      <hr class="hr_divider">
      <div id="5-aside" class="main_container">
         <!-- Title, Hours, Description -->
         <div class="other_div">
            <div class="activity_title_hours">
               <div class="activity_title">
                  5 Aside Footy
               </div>
               <div class="activity_hours">
                  - 5 Hours
               </div>
            </div>
            <hr class="hr_title_divider">
            <div class="activity_description">
               <p>
                  Lorem ipsum dolor sit amet, consectetur ultrices mauris ante consequat fusce adipiscing, tempor orci aliquam, eros rutrum gravida nec, quo augue lectus integer consequat. Vitae quis fringilla erat nunc ligula habitant. Tortor risus aliquam sodales  
               </p>
            </div>
         </div>
         <!-- Pic -->
         <div id="pic_container" class="pic_container">
            <img src="./images/5-aside.jpeg" class="pic" alt="5 Aside"/>
         </div>
      </div>
      <hr class="hr_divider">
   </div>
</body>

这是CSS：

.page_description {
    background-color:rgba(555,555,555,0.5);
    width: 40%;
    margin-left: auto;
    margin-right: auto;
    font-size: large;
    border-radius: 8px;
    margin-bottom: 2%;
}

.main_container {
    width: 40%;
    margin-left: auto;
    margin-right: auto;
    /* overflow: hidden; */
    background-color:rgba(555,555,555,0.5);
    border-radius: 8px;
    display: flex;
    /* margin-bottom: 5%; */
}

.other_div {
    float: left;
    min-width: 60%;
    max-width: 60%;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 2%;
    padding-bottom: 2%;
}

.activity_title_hours{
    display: flex;
}

.activity_title {
    float: left;
    font-size: 35px;
    text-decoration: underline;
    height: 100%;
    /* width: 50%; */
    line-height: 40px;
}

.activity_hours {
    float: left;
    font-size: 25px;
    min-height: 100%;
    line-height: 40px;
    text-align: left;
}

.pic {
    float: right;
    /* min-width: 35%; */
    box-sizing: border-box;
    margin-top: 1%;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 5%;
    padding-top: 5%;
    border-radius: 8px;
    margin-left: auto;
    margin-right: auto;
    height: 100%; 
    width: 100%;
}



.activity_description p {
    font-size: 20px;
}

hr {
    border-width: 2px;
}
.hr_tag {
    width:40%;
    margin-left: auto;
    margin-right: auto;
}

.hr_divider {
    width: 40%;
    margin-left: auto;
    margin-right: auto;
    height: 3px;
    color: white;
    background-color: white;
    border: none
}

.hr_title_divider {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    height: 3px;
    color: white;
    background-color: white;
    border: none
}

.title {
    text-align: center;
    text-decoration: underline;
    font-size: 45px;
    padding-bottom: 1%;
    padding-top: 1%;
    color: white;
}

.content {
    height: 100%;
    width: 100%;
    text-align: center;
    display: inline-block;
}

如何阻止图像像当前那样拉伸？

谢谢

Answer 1

在您的.pic规则中，将height: 100%;更改为height: auto;

防止图像在div中拉伸并保持缩放

1 个答案: