引導：不調整，保持容器

內的剪輯圖像[這是我的第一篇文章 - 請溫柔;-)]引導：不調整，保持容器

我有我想要的頁面頭部的一部分使用的圖像。圖像（有意）非常寬，所以它可以在任何設備寬度上使用。

圖像的一部分只是一條（圖案化的）長線（看起來有點像一根繩子或一根繩子），根據需要可以裁剪（從右邊）。

隨着設備寬度的變化，我想圖像不是更改比例尺，而是剪輯字符串的末尾，以便圖像的可見寬度遵循Bootstrap爲身體設置的寬度。

另一種說法是：我仍然希望容器調整大小，並在設備寬度發生變化時進行響應，但是我不希望圖像重新縮放，我希望它裁剪圖像的最右側部分而不是其父容器的邊界。

我在HTML是這樣的：

<body class="container> 
    <header class="row-fluid"> 
    <div class="my-image-container"> 
     <img class="my-image" src="images/my_image.png" alt="" /> 
    </div> 
    </header> 
    ... 
</body>

和CSS：

.my-image-container { 
    /* What to put here? */ 
} 

.my-image { 
    /* What to put here? */ 
}

我嘗試使用以下內容：

.my-image { 
    max-width: none; 
    overflow: hidden; 
}

然而，儘管它不再調整圖片，圖片的結尾將在我調整大小時運行到瀏覽器的邊緣，而不是保持綁定body/header/div父母的寬度限制。

在這裏和那裏有其他問題/答案似乎使用容器和圖像（分別）的相對/絕對位置，以及一些其他設置，但我沒有太多運氣。

我也嘗試將圖像分解成更小的片段，我可以重複，但結果輸出不美觀。

我一直沒有找到任何解決這個問題的先前的問題，我希望你能幫助我。

欣賞您的輸入！

來源

2017-03-05 booraroom

使用背景圖片將要走的事情更簡單的方法，後來讓您選擇添加在上面的文字等，這是頭:)

歡迎堆棧溢出比較規範的，每個人都可以否則溫柔（祝你好運！）

.my-image-container { 
 
    height: 250px; 
 
    background: url("http://placehold.it/800x250") top left no-repeat; 
 
}

<header class="row-fluid"> 
 
    <div class="my-image-container"></div> 
 
</header>

來源

2017-03-05 18:42:39 mayersdesign

工作就像在第一次嘗試一個魅力。非常感謝您的及時回覆（以及熱烈的歡迎）。 – booraroom

這很棒，向上和向上 – mayersdesign

引導：不調整，保持容器

回答

相關問題