Блог

Главная - Вопросы по программированию - CSS обрезанное изображение внутри статического контейнера, расположенное в абсолютном соответствии с прародителем

CSS обрезанное изображение внутри статического контейнера, расположенное в абсолютном соответствии с прародителем

#javascript #html #css #css-position

#javascript #HTML #css #css-position

Вопрос:

У меня есть несколько фрагментов изображений, которые в конце должны показывать полное изображение. Надеюсь, в моем коде ниже вы можете получить представление о том, чего я хочу достичь. У меня есть дедушка и дедушка div, который всегда будет скрыт левым и правым изображением. На данный момент я обернул изображения родительским контейнером div («parent»), чтобы установить размер для плиток. Теперь моя проблема в том, что «переполнение: скрытое» работает только в том случае, если я установил для родительского элемента значение «позиция: относительная». Но для того, чтобы расположить изображения абсолютно для дедушки и бабушки, относительное расположение родительского элемента мешает моим планам. Есть ли у вас какие-либо идеи, как я могу этого добиться? Если это невозможно в CSS, я мог бы также использовать JS для этого.

 .grandparent {
  display: flex;
  flex-direction: row;
  background-color: blue;
  width: 960px;
  height: 720px;
}

.parent {
  width: 100px;
  height: 125px;
  overflow: hidden;
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
} 
 <div class="grandparent">
  <div class="parent">
    <img class="child left" src="https://cdn.pixabay.com/photo/2013/07/25/13/01/stones-167089_960_720.jpg">
  </div>
  <div class="parent">
    <img class="child right" src="https://cdn.pixabay.com/photo/2013/07/25/13/01/stones-167089_960_720.jpg">
  </div>
</div>

Ответ №1:

Не используйте overflow:hidden , а рассмотрите clip-path вместо этого. Он будет делать то же самое, что и overflow, и вам не нужно учитывать position:relative 

 .grandparent {
  display: flex;
  flex-direction: row;
  background-color: blue;
  width: 960px;
  height: 720px;
  position: relative;
  overflow: hidden;
}

.parent {
  width: 100px;
  height: 125px;
  clip-path:inset(0); /* this will hide the overflow */
}

.child {
  position: absolute;
  top: 0;
  left: 0;
} 
 <div class="grandparent">
  <div class="parent">
    <img class="child left" src="https://cdn.pixabay.com/photo/2013/07/25/13/01/stones-167089_960_720.jpg">
  </div>
  <div class="parent">
    <img class="child right" src="https://cdn.pixabay.com/photo/2013/07/25/13/01/stones-167089_960_720.jpg">
  </div>
</div>