Question

我在CSS的响应性方面遇到问题。我的图片没有随着浏览器窗口的增加或减少而缩小。下面是我的图像分区

<div class="images">
    <img src="imagefolder/coding2.jpg" alt="codepic" >
    <img src="imagefolder/coding.jpg" alt="codepic">
</div>

下面也是我的图像样式表类

@media  screen and (max-width:1000px){
.images {
    background-color: darkgrey;
    padding: 10%;
    width: 100%;
    float: left;
    margin-top: 30px;
    margin-bottom: 30px;
    object-fit: cover;
    height: auto;
    background-size: contain;

Answer 1

通过将图片设置为100％的宽度使图片适合父图片。像这样

.images img {
   width: 100%;
   height: auto;
}

@media screen and (max-width:1000px) {
  .images {
    background-color: darkgrey;        
    padding: 25px;
    width: calc(100% - 50px);
  }

  .images img {
    width: 100%;
    height: auto;
  }
}

<div class="images">
  <img src="https://www.inma.org/files/images/blogs/feature_photos/Oct16_Ideas-Buytaert-1800.jpg" alt="codepic"><img src="https://digitalagencynetwork.com/wp-content/uploads/2020/02/what-you-can-see-from-coca-colas-digital-marketing-strategy.jpg" alt="codepic">
</div>

Answer 2

给每个图像一个类<img class="myImage" src="imagefolder/coding.jpg" alt="codepic">并指定这些图像的宽度：.myImage { width: 100% //for example }

Answer 3

我相信您可以通过将每个<img>标签放在单独的<div>内或执行以下操作来解决您的问题：

.imgages {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

我在调整图像大小以适应浏览器屏幕时总是遇到问题

3 个答案: