Как сохранить соотношение сторон фонового изображения?

Я попытался посмотреть другие ответы, но не помог. Мой фон динамичен, поэтому размер изображений изменится, поэтому мне нужно сохранить пропорции, чтобы все изображение было видно. здесь мой CSS:

.image_submit_div {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 20px 50px;
    width: 55%;
    height: 320px;
    cursor: pointer;
    background: url('something.jpg'); /* this changes */
    margin: 0 0 25px;

}

HTML

<label for="id_image" class="image_submit_div">

В данный момент, в зависимости от изображения, иногда его обрезают. Я хочу, чтобы изображение было уменьшено, чтобы его можно было увидеть полностью. Любая идея?

Ответы

Ответ 1

Используйте background-size: cover; чтобы охватить весь элемент, сохраняя при этом соотношение сторон:

.background-1,
.background-2,
.background-3 {
  /* Set the background image, size, and position. */
  background-image: url('//via.placeholder.com/350x150');
  background-size: cover;
  background-position: center;

  /* Or, use the background shortcut. */
  background: url('//via.placeholder.com/350x150') center/cover;

  margin: 20px;
  border: 1px solid rgba(0, 0, 0, 0.3);
}

.background-1 {
  width: 300px;
  height: 200px;
}

.background-2 {
  width: 200px;
  height: 50px;
}

.background-3 {
  width: 100px;
  height: 200px;
}
<div class="background-1"></div>
<div class="background-2"></div>
<div class="background-3"></div>

Ответ 2

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

Но если вы хотите покрыть весь div фоновым изображением и не против того, чтобы изображение обрезалось, вместо этого используйте background-size:cover;.

.image_submit_div {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 20px 50px;
    width: 55%;
    height: 320px;
    cursor: pointer;
    background: url('http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg'); /* this changes */
    margin: 0 0 25px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
}
<label for="id_image" class="image_submit_div">