Блог

Главная - Вопросы по программированию - Как я могу использовать «подгонку объекта: содержать» в CSS и при этом иметь радиус границы на изображении?

Как я могу использовать «подгонку объекта: содержать» в CSS и при этом иметь радиус границы на изображении?

#html #css #image #object-fit

Вопрос:

Я пытаюсь показать изображение в стиле «лайтбокс», чтобы оно заполняло доступную область на экране, в данном случае 90% ширины страницы и 70% высоты.

Использование object-fit: contain; , по-видимому, является фактическим способом сделать это, но это не совсем работает border-radius . Можно ли использовать подгонку объекта к <img> объекту и при этом применять радиус границы по назначению?

Вам нужно будет изменить размер окна браузера, чтобы увидеть, что произойдет при запуске приведенного ниже фрагмента. У меня есть тот же код, работающий в JSFiddle, как показано в видео ниже.

Демонстрационное видео JSFiddle

 div {
  margin: auto;
  width: 90vw;
  height: 70vh;

  background-color: DeepSkyBlue;
}

img {
  width: 100%;
  height: 100%;
  object-fit: contain;

  border-radius: 50px;
  background-color: Crimson;
} 
 <div>
  <img src="https://images.freeimages.com/images/large-previews/773/koldalen-4-1384902.jpg">
</div>

Комментарии:

1. вам нужно будет сжать или развернуть сам тег img, а не то, что он отображает : пример : jsfiddle.net/6gw30rvL (отображение сетки предназначено только для выравнивания по вертикали)

Ответ №1:

Как прокомментировано, настройка max-width и max-height , кажется, то, что вам нужно или чего вы ожидаете:

 div {
  margin: auto;
  width: 90vw;
  height: 70vh;
  display:grid;

  background-color: DeepSkyBlue;
}

img {
  max-width: 100%;
  max-height: 100%; 
  margin:auto;/* x,y center if inside a grid or flex box */
 
  object-fit: contain;/* useless by now, img should keep its ratio */
  border-radius: 50px;
  border-radius: calc( 5vw   5vh); /* will scale, maybe you find this usefull */
  background-color: Crimson;
} 
 <div>
  <img src="https://images.freeimages.com/images/large-previews/773/koldalen-4-1384902.jpg">
</div>

Ответ №2:

Это на самом деле не помогает здесь.

Вместо этого установите максимальную ширину и высоту img на 100%. Система поместит его либо полностью сверху вниз, либо сбоку, но элемент img будет иметь любые необходимые размеры, поэтому радиус границы будет работать нормально.

Чтобы отцентрировать изображение, если вы этого хотите, вы можете display: flex использовать родительский раздел и выровнять/выровнять элементы по центру.

 div {
  margin: auto auto;
  width: 90vw;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: DeepSkyBlue;
}

img {
  max-width: 100%;
  max-height: 100%;

  border-radius: 50px;
  background-color: Crimson;
} 
 <div>
  <img src="https://images.freeimages.com/images/large-previews/773/koldalen-4-1384902.jpg">
</div>

Ответ №3:

Используйте object-fit: cover; вместо того, чтобы содержать

Метки: