文章/答案/技术大牛

发布

社区首页 >问答首页 >包装Divs / StyleSheet问题

问包装Divs / StyleSheet问题
EN

Stack Overflow用户

提问于 2018-05-03 00:55:08

回答 2查看 20关注 0票数 1

有没有办法这样做，而不是使用多个样式表，我可以使用相同的一个，并在所有不同的页面上调整相同的图像的大小？我的意思是说主页的logo是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;
  }

html

css

回答 2

Stack Overflow用户

发布于 2018-05-03 01:14:03

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

.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时，一个很好的编码方法就是here is a link to check it out。

票数 0

Stack Overflow用户

发布于 2018-05-03 01:43:41

是的，你可以，它只需要在不同的页面上有相同的声明。似乎你还没有在div中引用"img“类。试试这个：

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50139845

复制

相似问题

问包装Divs / StyleSheet问题
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问包装Divs / StyleSheet问题EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问包装Divs / StyleSheet问题
EN