Проблемы с упаковкой Div / StyleSheet
Есть ли способ сделать так, чтобы вместо использования нескольких таблиц стилей я мог использовать одну и ту же и изменять размер одного и того же изображения на всех разных страницах? Я имею в виду, так сказать, логотип домашней страницы составляет 200 пикселей 175 пикселей. Следующая страница, которую я хотел сделать 150 пикселей 100 пикселей, есть способ сделать это?
Есть ли способ сделать это?
Я пробовал обернуть вокруг них 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;
}
Ответы 2
Да, вы можете просто использовать другой набор классов в своей таблице стилей, которые изменяют размеры изображения и применяют те, которые вы хотите использовать в разметке на разных страницах, например:
.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, вот ссылка, чтобы проверить это.
Да, вы можете, для этого требуется только одно и то же объявление на другой странице. Похоже, вы не упомянули класс img внутри своего div. Попробуй это:
.img {
width: 250px;
height: 230px;
margin-top: 60px;
}
<body>
<div>
<img src = "images/logo.png" class= "img" >
</div>
</body>