Редактировать одно изображение с CSS. Img Sr c с классом все еще меняет все изображения на сайте - PullRequest
0 голосов
/ 08 февраля 2020

У меня есть изображение, которое мне нужно отредактировать с помощью CSS, чтобы оно стало мобильным.

Я добавил класс к изображению, но когда я редактирую этот класс с помощью CSS, все мои изображения изменить эти настройки?

Любая помощь будет принята с благодарностью.

Ответы [ 2 ]

1 голос
/ 08 февраля 2020

Не видя код, было бы сложно ответить, но чем больше SPECIFI C вы можете использовать при нацеливании на элементы, тем лучше! Вот 2 способа:

CSS NESTED CLASSES

Два класса, разделенные пробелом цели только элементы вложенный внутри другого. Пример:

.myParentClass .myNestedClass {
       property: value;
    }

<div class="myParentClass">
     <img class="myNestedClass" src="./myPicture"/>
</div>

CSS КОМБИНИРОВАННЫЕ КЛАССЫ

Два класса без ЛЮБОЙ пробел между ними означает, что правила CSS будут ONLY применяться, если элемент содержит ОБА классов. Это, безусловно, сделает ваш элемент еще более уникальным! Например:

.myCoolClass.myMoreSpecificClass {
       property: value;
    }

 <div>          
     <p class="myCoolClass myMoreSpecificClass"> Hello </p>
 </div>

Я бы порекомендовал вам использовать второй вариант для нацеливания только на одно изображение. Удачи!

0 голосов
/ 08 февраля 2020

Используйте bootstrap класс для адаптивного изображения. Вы можете использовать свой личный css для ширины и высоты изображения и для других стилей .... здесь ваш решить

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>image problem</title>
  </head>
  <body>
    <h1>This is image</h1>
    <img class="img-fluid" src="https://cdn.pixabay.com/photo/2020/02/04/09/50/the-alps-4817766_960_720.jpg" alt="nature">
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...