Как добавить размер фона в css на основе размера изображения?

ProgramBox

Как добавить размер фона в css на основе размера изображения?

Post author:admin
Запись опубликована:14 апреля, 2023
Post category:Вопросы по программированию

#javascript #css #twitter-bootstrap #background-size

#javascript #css #twitter-bootstrap #размер фона

Вопрос:

Я работаю над проектом, в котором пользователь сможет выбрать или загрузить изображение, и оно будет отображаться внутри этих кругов. Изображения динамически добавляются в качестве фоновых изображений. Проблема возникает, когда я пытаюсь установить размер фона. Если изображение больше, чем круги, я бы хотел, чтобы у него была обложка размером с фон, чтобы уменьшить масштаб. Если изображение меньше круга, я не хочу, чтобы оно увеличивалось или что-то еще, поэтому, не устанавливая размер фона, достигается этот эффект.

Есть идеи о том, как я мог бы этого добиться?

Основной html выглядит следующим образом:

 <div class="image-boundary">
    <div class="content">
        <div class="image-boundary-photo img-responsive" style="background-image: url('https://www.fillmurray.com/g/100/100');" alt="">
        </div>
    /div>
</div>

css:

 .module-list-home .content .image-boundary-photo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  background-repeat: no-repeat;
  background-position: center;
}

Вот codepen моего примера. http://codepen.io/johnsonjpj/pen/zKyGZp?editors=1100
Третье изображение должно иметь размер фона: обложка; потому что оно больше, в то время как остальные должны оставаться такими, какие они есть.

1. background-size: contain Это то, что вы хотите?

2. @Blazemonger Нет, я хочу, чтобы он закрывал, достаточно ли большое изображение. и оставьте его исходный размер, если он меньше контейнера.

3. Вместо фонового изображения вы могли бы использовать позиционированный элемент с максимальной шириной: 100%

Ответ №1:

Вы могли бы получить некоторую отдачу от background-size настройки « contain «.

Я добавил его встроенным в ваше перо, для просмотра, здесь: http://codepen.io/cam5/pen/vXvNOq?editors=1100

Он увеличивает размеры, когда они слишком малы, так что это может быть не совсем то, что вам нужно. Но для запроса размера изображения, скорее всего, потребуется некоторый javascript. Это подход, основанный только на CSS.

 <div class="image-boundary-photo img-responsive" 
     style="background-image: url('https://www.fillmurray.com/g/100/100');
     background-size: contain;" alt="It's Bill Murray.">
</div>

Из MDN:

содержать

Ключевое слово, которое масштабирует изображение как можно больше и поддерживает соотношение сторон изображения (изображение не сжимается). Изображение помещается в почтовый ящик внутри контейнера. Когда изображение и контейнер имеют разные размеры, пустые области (верхняя / нижняя часть слева / справа) заполняются цветом фона. Изображение автоматически центрируется, если оно не перегружено другим свойством, таким как background-position.

1. Спасибо, что взглянули на это. Меня устраивает какой-то javascript, но я не хочу, чтобы изображения увеличивались в масштабе. Может быть, какая-то проверка, которая проверяет, больше ли изображение, чем контейнер, а затем устанавливает размер фона, чтобы покрыть его?

Ответ №2:

Вы пробовали устанавливать свойство background-size: contain; в .module-list-home .content .image-boundary-photo классе?

Чтобы решить проблему, когда маленькие изображения также становятся слишком большими, background-size: contain; используйте размер в процентах. например

установите свойство background-size:60%; в .module-list-home .content .image-boundary-photo классе вместо contain и я думаю, что ваша проблема будет решена.

Надеюсь, это поможет.

[Править]

Также написал решение с jquery, динамически проверяющее размер изображения и корректирующее. Вот решение jquery:http://codepen.io/Nasir_T/pen/ZpVbJo . Убедитесь, что на вашей странице есть ссылка на jquery.min.

1. Это позволяет всем им помещаться внутри круга, что не совсем то, что мне нужно. Если они больше, чем контейнер, я бы хотел, чтобы они использовали background-size: cover; таким образом, они занимают все пространство.

2. Пожалуйста, проверьте ссылку code pen codepen.io/Nasir_T/pen/ZpVbJo . Я добавил в решение jQuery. Также отредактировал мой ответ, чтобы показать решение.

Ответ №3:

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

 $('.img-responsive').each(function(key, el) {
    var img = new Image;
    img.src = $(el).css('background-image').match(/^url("?(. ?)"?)$/)[1];
    if ($(el).width() <= img.width || $(el).height() <= img.height)
        $(el).css('background-size', 'cover');
})

вот рабочий пример