Img превышать экран и создать полосу прокрутки внизу

Question

Я застрял в проблеме.Я добавил img с этим кодом:

HTML:

  .homepage-right {
	    position: absolute;
	    right: 0;
	    top: 46em;
    }

    .river-right {
	    padding: 0;
    }

    .img-river-right {
	    float: right;
	    max-width: 50%;
        -ms-transform: rotate(1deg); /* IE 9 */
        -webkit-transform: rotate(1deg); /* Safari 3-8 */
        transform: rotate(1deg);
    }

<section id="homepage-river-right">
        <div class="homepage-right">
            <div class="col-md-12 river-right">
               <img class="img-river-right" src="https://images.unsplash.com/photo-1490644120458-f5e5c71d2ab0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"> 
            </div>
        </div>        
    </section>


  

Моя проблема: Проблема с сетью

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

Спасибо.

Answer 1

Добавить overflow hidden в .river-right

.river-right {
    padding: 0;
    overflow:hidden;
}