0

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

我尝试了几件事无济于事：

  1. 移除 div id 上的 floatright和 on 上的相对定位right-image

  2. 尝试最小宽度为 div idright

  3. 以百分比给出高度，宽度

  4. 添加了视口设置。

在模板中，图像被放置在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

将欣赏任何见解。

4

2 回答 2

2

当您的文档大小小于一定数量的像素时，您可以添加媒体查询以将其从文档中删除。

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

否则，您也可以使用相同的方法调整其位置，只需根据窗口大小调整其位置即可。我在您的代码中看到的问题是您使用了 -10px 边距，这导致它与您的其他元素重叠，因此您可以简单地针对某些视口大小进行更改。

此外，您可能需要考虑将您的大小调整方法从使用像素的绝对值改为使用百分比，以便您的图像可以随着视口的变化而稍微弯曲。

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

于 2013-04-02T20:26:01.913 回答
1

如果你使用

position: absolute;

对于 ID=right div，它永远不会低于 left div

于 2013-04-02T20:30:51.260 回答