Как создать округлую рамку вокруг моего изображения? - PullRequest
Новая
       0

Как создать округлую рамку вокруг моего изображения?

2 голосов
/ 28 марта 2020

У меня есть галерея изображений со всеми изображениями одинакового размера. Я пытаюсь добавить цветную округлую рамку вокруг изображений, однако у меня возникают некоторые проблемы при этом.

Для одного, граница занимает всю ширину поля, когда я только хочу, чтобы это было немного больше, чем изображение вокруг. Не только это, но оно даже не покрывает все изображение, а только образует затмение вокруг некоторых из них. Я использовал случайное изображение для этого, но то же самое происходит со всеми другими изображениями. 

.galleryStyle {
  color: white;
  width: 100%;
  background: black;
}

.galleryContainer {
  height: 100%;
  margin: 10px;
  padding: 15px;
  border-radius: 100%;
  background: red;
}

.galleryGrid {
  display: grid;
  grid-template-columns: repeat(2, 3fr);
  padding: 5px;
  margin: 10px;
  height: 100%;
  width: 60%;
}

<body class="galleryStyle">
  <div class="galleryGrid">
    <div class="galleryContainer">
      <div>
        <a href="google.com">
          <img src="https://i.ytimg.com/vi/BY3PXd2zLT4/maxresdefault.jpg" alt="image1">
        </a>
      </div>
    </div>
  </div>

https://jsfiddle.net/5q9gxof4/1/

Ответы [ 3 ]

3 голосов
/ 28 марта 2020

border-radius должен применяться к самому img.

Для этого вы можете выбрать любые теги img в элементе galleryContainer с помощью следующего селектора и затем применить радиус границы. 

.galleryContainer img {
  border-radius: 50px;
}

Затем вы можете использовать border css правило для создания рамки вокруг ваших изображений: 

.galleryContainer img {
  border-radius: 50px;
  border: 10px solid red; # This create the border
}
2 голосов
/ 28 марта 2020

Вы можете просто установить border и border-radius непосредственно для вашего элемента изображения следующим образом: 

img {
  border:10px solid red;
  border-radius: 10px;
}

и вот для него ссылка jsfiddle

2 голосов
/ 28 марта 2020

Попробуйте это: 

img {
  border-radius: 50px;
  border: 2px solid red;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...