CSS фон-размер заполняет родительский элемент

#css

Вопрос:

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

 .panel-image {
  height:100vh;
  width:50%;
  background-size:cover;
  background-attachment:fixed;
  background-position:center;
  background-image:my-image.jpg;
}

.parent{
  height:100vh;
}

Вот онлайн-пример. Div изображения панели имеет квадратную форму, как и исходное изображение, но изображение по-прежнему сильно обрезано, как если бы div изображения панели был намного шире:

http://jsbin.com/siweloxebe/edit?html ,css,вывод

1. Попробуйте добавить отображение: встроенный блок; в .panel-изображение

2. Спасибо, но все то же самое

3. Да, я пытаюсь заставить изображение удобно закрывать панель-изображение div с минимальной обрезкой. Это должно быть исправлено вложение

4. это для своего рода эффекта параллакса, да

Ответ №1:

Это потому, что вы установили высоту дочернего div такой же, как у родительского.

Я поиграл с вашим кодом здесь, и он кажется прекрасным, или я, возможно, неправильно понял ваш вопрос

1. Кажется, что он по-прежнему действует так, как будто он должен покрывать родительский. Если вы посмотрите сейчас, с квадратным изображением панели div и квадратным изображением, изображение должно быть практически не обрезанным, но оно отображается обрезанным, как если бы изображение панели было той же ширины, что и родительское. jsbin.com/siweloxebe/edit?html ,css,вывод

2. О да, моя ошибка. Я вынул background-attachment:fixed; , и, похоже, это было исправлено. jsbin.com/josagusuvo/edit?html ,css,вывод