Question

在我的主页上，我有一个图像在浏览器调整大小时移动或环绕。我只是想改变它，以便在浏览器很小的情况下从右侧切割图像。

我尝试了一些无用的事情：

移除div id right上的浮动以及right-image上的相对定位
尝试使用div-width right
以百分比形式给出高度，宽度
添加了视口设置。

在模板中，图片位于main之外，如：

<body>
    <div id = "main"> 
        <div id = "left">
            <div id="left-title">Tag Line</div>
            <div id="left-blurb">
                 Some blurb
            </div>
        <div id='left-signup'> SignUp! button</div>
    </div>

    <div id = "right">
        <div id = "right-image"></div>     <--- Image
    </div>

</body>

相关的css：

body    {
    margin: 0 auto;
    height: auto;
    overflow-x: hidden;
}
#main   {
    float: center;
    width: 950px;
    overflow: visible;
    height: auto;
    margin: 0 auto;
}
#left {
    float: left;
    width: 500px;
    display: inline-block;
}
#left-title {
    font-size: 3.4em;
    margin: 25px 0px 20px 15px;
}
#left-blurb {
    margin: 0px 20px 10px 15px;
}
#left-signup {
    margin: 0px 0px 0px 90px;
}
#right {
    float: right;
    width: 600px;
    height: 400px;
    margin-top: -10px;
    display: inline-block;
}
#right-image {
    height: 100%;
    width: 100%;
    position: relative; 
    left: -50px; 
    top: 0px; 
    background: url(my_photo.jpg) no-repeat;
    -moz-background-size: cover;
    background-size: cover;
    z-index: 0;
}

我认为这是与问题相关的CSS。但如果还不够，我所谈论的网站是https://www.mathnuggets.com

欣赏任何见解。

Answer 1

您可以添加媒体查询，以便在文档大小小于特定像素数时将其从文档中删除。

@media screen and (max-width:480px) {
    #right-image{
       display: none;
     }
}

否则，您也可以使用相同的方法调整其位置，只需根据窗口大小调整其位置即可。我在你的代码中看到的问题是你使用了一个-10px的边距，导致它与你的其他元素重叠，所以你可以根据某些视口大小改变它。

此外，您可能需要考虑将大小调整方法更改为绝对使用像素，而是使用百分比，以便在视口更改时图像可以稍微弯曲。

我认为这个网站有很多很棒的资源可以帮助您使用现有设计，以便根据需要提高响应速度：http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design

Answer 2

如果您使用

position: absolute;

对于ID =右div，它永远不会在左div下面

在浏览器调整大小时防止图像换行（移动）

2 个答案: