时间戳

首页 > 解决方案 > 图像超出屏幕并在底部创建滚动条

css - 图像超出屏幕并在底部创建滚动条

问题描述

我被困在一个问题上。我用这段代码添加了 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 中，我需要在 photoshop 中使用完美的 img 来做到这一点。

谢谢。

标签： csshtml

解决方案

添加overflow hidden_.river-right

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

推荐阅读