Question

有没有这样做而不是使用多个样式表我可以使用相同的样式并在所有不同的页面上调整相同的图像？我的意思是如此说主页徽标是200px 175px。下一页我想让它150px 100px是否有办法做到这一点？
有办法吗？

我试过在它们周围包裹div但是当我这样做并将图像添加到div中时我没有任何反复的风格

  <div class="header-image">
   <img src="images/logo.png" class="rounded mx-auto d-block">
  </div>

和我设计时的代码

   img {
    width: 250px;
    height: 230px;
    margin-top: 60px;
  }

Answer 1

是的，您可以在样式表中使用一组不同的类来更改图像的尺寸，并在不同页面的标记中应用您想要的图像，例如：

.image--small {
  width: 100px;
}
.image--medium {
  width: 200px;
}
.image--large {
  width: 400px;
}

/*Unimportant rule*/
img {
  display: block;
  margin-bottom: 20px;
}

<img src="http://via.placeholder.com/350x150" alt="" class="image--small">
<img src="http://via.placeholder.com/350x150" alt="" class="image--medium">
<img src="http://via.placeholder.com/350x150" alt="" class="image--large">

编写css以便可维护时遵循的一种很好的编码方法称为BEM，here is a link to check it out。

Answer 2

是的，你可以，它只需要在不同的页面上进行相同的声明。好像你没有提到你div中的“img”类。试试这个：

 .img {
    width: 250px;
    height: 230px;
    margin-top: 60px;
  }

 
  <body>
  <div>
   <img src="images/logo.png"  class= "img" >
  </div>
  </body>

包装Divs / StyleSheet问题

2 个答案: