Question

我正在与woo-commerce合作，我有产品的小图像，我想在div的中间显示图像，但问题是woo-commerce css使用width = 100％我如何覆盖它和显示实际图像

Woo-commerce CSS

.woocommerce div.product div.images img {
    display: block;
    width: 100%;
    height: auto;
    box-shadow: none;
}

.woocommerce div.product div.images box width is 300px

我的图像尺寸是200px显示当我显示图像时它显示我300px大小但我想以200px尺寸显示它。

我试图像我的custom.css一样覆盖下面的css。

.woocommerce div.product div.images img {
      width:auto;
}

Answer 1

我猜你的样式表是先加载的，这会导致初始样式覆盖你的选择器。试试这个：

body.woocommerce div.product div.images img {
      width: auto;
      margin: auto;
}

body的补充是为了确保此规则覆盖默认的css。 margin: auto（或margin: 0 auto）规则是将块图像居中。

Answer 2

这是使图像居中的一种方法。

在图片的父容器上，设置text-align: center。
在图片上，设置width: auto和display: inline-block。

＆＃13;

.img-contain{
  width:300px;
  text-align: center;
  border:1px solid red;
}
.img-contain img {
  width:100%;
  text-align: center;
}
.center-image {
    display: inline-block;
    width: auto !important;
    height: auto;
    margin: auto;
}

＆＃13;

<div class="img-contain">
  <img src="http://lorempixel.com/200/200/"
        class="center-image" >
</div>

＆＃13;

Answer 3

您可以通过将内容区域的$data2.添加到选择器（在本例中为id或#main）来更具体地定位这些项目：

#content

.woocommerce #main .product .images img { width: auto; }有更高的优先级＆＃34;比上课。

覆盖时图像宽度问题

3 个答案: