防止在瀏覽器上調整圖片大小（移動）調整大小

在我的主頁上，我有一個圖片可以在瀏覽器中調整大小或繞過瀏覽器大小。我只是想改變它，這樣如果瀏覽器很小，圖像就會從右邊切下。防止在瀏覽器上調整圖片大小（移動）調整大小

我已經嘗試了一些事情不得要領：

刪除的DIV ID right和right-image
嘗試相對定位的浮動最小寬度爲DIV ID 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

將欣賞任何見解。

來源

2013-04-02 zaphod

當文檔大小小於特定像素數時，您可以添加媒體查詢以將其從文檔中刪除。

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

否則，你也可以爲你使用同樣的方法，只是根據調整窗口大小的位置做調整其定位。我在代碼中看到的問題是，您使用的是-10px的邊距，導致它與其他元素重疊，因此您可以簡單地更改某些視口大小。

此外，您可能需要考慮將使用像素的絕對尺寸方法從絕對值改爲使用百分比，以便您的圖像在視口更改時可以彎曲一點。

這個網站有很多很好的資源，我認爲可以幫助您與您現有的設計工作，以便需要時能更快地響應：http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design

來源

2013-04-02 20:26:01 fskirschbaum

非常感謝分享信息。 – zaphod

不客氣，如果我不太瞭解你的問題的精神，我很抱歉。 – fskirschbaum

如果使用

position: absolute;

的ID =右分區它將永遠不會在左分區

來源

2013-04-02 20:30:51 Mat

我認爲這個工作起初，但這樣弄亂了不同瀏覽器的佈局。並指定邊距不能解決它。 – zaphod

你可以顯示代碼？ – Mat

我認爲粘貼在問題中的CSS是代碼的相關部分。還有哪些CSS可以幫助？我可以發佈它。如果可以的話，你也可以在https://www.mathnuggets.com查看 – zaphod

防止在瀏覽器上調整圖片大小（移動）調整大小

回答

相關問題