#html #css #image
#HTML #css #изображение
Вопрос:
Как бы я сделал изображение вложенным в div, чтобы установить его размер в зависимости от класса div. уменьшение размера изображения в зависимости от того, где оно находится на странице. Например:
<div class="a">
<img src="a.jpg">
<div>
<div class="b">
<img src="a.jpg">
<div>
Я хотел бы установить для изображения, вложенного в «a», размер 10X10, а для другого — размер 20X20, как бы я это сделал, не создавая разные классы для изображений?
Ответ №1:
в ваш css-файл добавьте это:
.a img {width: 10px; height: 10px}
.b img {width: 20px; height: 20px}
это приведет к тому, что любое изображение в «a» будет иметь размер 10X10, а любое изображение в классе «b» — размер 20X20.
Комментарии:
1. Это сработало бы, но OP спросил «как бы я это сделал, не создавая разные классы для изображений?»
2. @andyb Этот пример делает именно то, о чем просил OP; стилизует изображение на основе его родительского контейнера.
3. @Ross Да, я думаю, вопрос немного двусмысленный. OP не хочет разных классов для изображений, но семантически решение имеет разные классы для изображений. Тем не менее, это все еще хорошее (и, возможно, единственное CSS-решение), так что 1 к @nayish
4. Отлично, это то, что я искал, я не знал, что это возможно. @andyb Я хочу улучшить, что я хотел сделать это без создания определенного класса для каждого из изображений в div, в которые они вложены, поскольку у меня на странице их будет 15, и достаточно изменить название класса div, теперь все, что мне нужно сделать, это изменить настройки для вложенного img.
5. @Mike Нет проблем, рад, что вы получили ответ, который хотели 🙂