Question

所以我想创建一个响应迅速的网站，到目前为止一直很好。

但是我在保持图像宽度和高度相同（图像是正方形）时遇到了问题。

我有一个名为“pageContainer”的div，里面有许多名为“eachBlog”的div。在这里面有一个图像div和一个文本div。由于网站响应随着页面宽度的增加，图像也是如此。然而，这会破坏平方图像的比例（使其成为矩形）。

我确定这取决于我糟糕的代码:(

所以我要做的是：当div“eachBlog”在宽度和高度上增长时，图像也是如此，并且看起来像一个正方形：）

这是html：

   <div class="eachBlog">
        <div class="image">
            <img src="image.jpg">
        </div>
        <div class="text">
            <h1 id="title"> Shifted Thoughts- Mazde </h1>
            <p id="sample"> /* text */ </p>
            <p id="more"> READ MORE </p> 
            <div class="bottom">
            <p id="tag"> HIP HOP </p>
            <p id="date"> 5 feb </p>
            </div>
        </div>
    </div>

css：

   .pageContainer{
     width: 80%;
     height: 80%;
     display: block;
     margin: 0 auto;
     }
    .eachBlog{
       position: relative;
       background: #ffffff;
       width: 48%;
       height: 20%;
       float: left; 
       margin-top: 2%;
       margin-right: 2%;
       }

      .image{
         width: 37%;
         height: 100%;
         float: left;
      }
       .image img{
          width: 100%;
          height: 100%;
       }

      .text{
         width: 55%;
         height: 100%;
         position: relative;
         float: left;
         padding-left: 4%;
         padding-top: 1%;
       }

提前非常感谢!!

Answer 1

设置max-width和max-height而不是width/height。

.image img{
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto; /* nnot sure if width/height are necessary here */
}

如何保持图像响应并具有相同的视角

1 个答案: