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>

img没有回应

1 个答案: