img 没有反应

Question

请帮助我对此感到疯狂 我正在尝试为 Web 应用程序设置一个图像，它应该是响应式的，但是当我更改浏览器大小时它会拉伸而不是调整大小 这是代码和CSS

<div class="row">
    <ul class="lista_de_categorias">
        @foreach (var categories in Model)

        {
            <li class="categorieslist">
                <a href="#">  

                    <div class="col-md-4 colum4">
                        <div class="categoriesdiv">
                            <h2 class="categoriesheading">Category Name</h2>
                        </div>

                        <img class="catImages" src="@categories.ImagePath" alt="images of different window blinds"/>

                    </div>

                </a>
            </li>
        }
    </ul>
</div>

这里是 img 的 CSS 代码

.catImages{

     display:flex;
    flex-wrap:wrap;
    width:100%;

    justify-content:center;
    margin-left:0px;
    margin-right:0px;
    height: auto;

}

但这不起作用 我也试过max-width:100%，但没有

Answer 1

查看您的课程.col-md-4 和HTML 结构，我可以看到您正在使用twitter-bootstrap。所以只需按照Docs 中的说明使用.img-responsive

添加了.container 以包装.row，其结构也应符合Docs。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <ul class="lista_de_categorias">
      <li class="categorieslist">
        <a href="#">

          <div class="col-md-4 colum4">
            <div class="categoriesdiv">
              <h2 class="categoriesheading">Category Name</h2>
            </div>

            <img class="img-responsive catImages" src="//lorempixel.com/1600/900" alt="images of different window blinds" />

          </div>

        </a>
      </li>
    </ul>
  </div>
</div>