Изображения внутри дисплея: элемент сгиба частично искажен или обрезан

Question

В настоящее время я строю горизонтальный скроллер для галереи изображений.

Скроллер пока работает, но, к сожалению, изображения частично искажены или часть его обрезана.

Я подозреваю, что он как-то связан с Flexbox ...

Здесь вы можете увидеть код ползунка прокрутки (разметка + scss) https://jsfiddle.net/3cdkxbvm/

.scroll-slider-title {
	 display: flex;
	 justify-content: center;
	 flex-direction: column;
	 align-items: flex-start;
	 margin-bottom: 0.5em;
	 font-weight: 700;
}
 .scroll-slider-title svg {
	 margin-right: 1rem;
	 font-size: 1.5em;
}
 .scroll-slider-title a {
	 color: inherit;
}
 .scroll-slider {
	 width: 100%;
	 overflow: hidden;
	 position: relative;
	 margin-bottom: 4rem;
}
 .scroll-slider .scroll-slider-pane {
	 width: 100%;
	 overflow: auto;
	 padding: 2rem 0 3rem;
	 box-sizing: border-box;
	 -webkit-overflow-scrolling: touch;
	 scroll-behavior: smooth;
}
 .scroll-slider .scroll-slider-track {
	 display: inline-block;
	 padding: 0;
	 margin: 0;
}
 .image-gallery {
	 display: flex;
}
 .image-gallery .image-gallery-item {
	 margin-right: 1rem;
	 overflow: hidden;
	 flex-shrink: 0;
	 width: auto;
}
 .image-gallery .image-gallery-item img {
	 height: 100%;
	 width: auto;
}
 

<div class="scroll-slider" id="js_image_gallery"> 
		
		<div class="scroll-slider-pane">
			<div class="scroll-slider-track">
				<div class="image-gallery">
							
          <div class="image-gallery-item">
            <img src="https://s1.waazz.com/thumbs/l800/83/1083_af8cbfd999d37bbac86691e9c5ffb76f">
          </div>
          <div class="image-gallery-item">
            <img src="https://s1.waazz.com/thumbs/p800/84/1084_72a6840640a8650cc01f41d55346973c">
          </div>
          <div class="image-gallery-item">
            <img src="https://s1.waazz.com/thumbs/p800/85/1085_5f18260d83ea0790be5a8029b7638872">
          </div>
          <div class="image-gallery-item">
            <img src="https://s1.waazz.com/thumbs/p800/86/1086_66daf815df8570e11564f3426c074f3c">
          </div>
        </div>
      </div>
  </div>
</div>

Теперь самый важный вопрос: почему мои изображения частично искажены или часть их обрезана? И как я могу решить это? Важно, чтобы фотографии всегда имели одинаковую высоту. Однако ширина может варьироваться в зависимости от изображения.

Здесь вы можете найти рабочую скрипку, где вы можете увидеть проблему с изображениями. Я протестировал ее в последней версии Chrome. https://jsfiddle.net/3cdkxbvm/

Заранее спасибо за помощь

Answer 1

Возможно, вам нужно что-то вроде этого:

HTML

<div class="scroll-slider-track">
  <div class="image-gallery">
    <div class="image-gallery-item">
      <img src="https://s1.waazz.com/thumbs/l800/83/1083_af8cbfd999d37bbac86691e9c5ffb76f">
    </div>
    <div class="image-gallery-item">
      <img src="https://s1.waazz.com/thumbs/p800/84/1084_72a6840640a8650cc01f41d55346973c">
    </div>
    <div class="image-gallery-item">
      <img src="https://s1.waazz.com/thumbs/p800/85/1085_5f18260d83ea0790be5a8029b7638872">
    </div>
    <div class="image-gallery-item">
      <img src="https://s1.waazz.com/thumbs/p800/86/1086_66daf815df8570e11564f3426c074f3c">
    </div>
  </div>
</div>

SCSS

.scroll-slider-track {
  // do not set a height for this container
  // because the horizontal scroller also needs
  // space and this varies in every browser
  width: 800px; // set the width you need
  overflow: auto;
}

.image-gallery {
  height: 300px; // height of the gallery images, set one you like best
  display: flex;
  flex-flow: row nowrap;
}

.image-gallery-item {
  flex: 0 0 auto; // turn off shrink and grow behavior
  // needed, so the img element can calculate its height
  // using a  value in percent:
  height: 100%;

  &:not(:first-child) { // addressing all items except the first one
    margin-left: 1rem;
  }

  img {
    height: 100%;
    width: auto; // this will keep the image ratio intact
    flex: 0 0 auto; // turn off shrink and grow behavior
    display: block; // making sure, no whitespace or line-height issues occur
  }
}

Answer 2

Удалить поле справа или добавить поле справа больше 1rem