0

Google は何も役に立ちませんでした :(

私は、画像の幅を 100% にし、高さを 400px に固定し、ひどく引き伸ばさず、引き伸ばす代わりにズームインする方法を求めてい

ます。私はバックストレッチが行うことと似ていないものを求めていますが、フルスクリーンの背景ではありません.
このビデオのようなものは、いくつかの例で私が求めているものを示していると思います (ワシの写真は私が探しているものを示していると思います) http ://www.teehanlax.com/resources/img/story/medium/prototypes/feature-header.mp4

幅 100% の画像、これは高さが固定で、トリミングされた画像を示し、ブラウザに合わせてスケーリングされます


。http:/ /jsfiddle.net/XcYfS/2/ 

<style>
    img {
        width: 100%;
        height: 400px; }

    h1, p {
        width: 80%;
        padding-left: 10%; }
</style>

<img src="http://placekitten.com/200/300" alt="">

<h1>Interesting Title!</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat magnam culpa obcaecati numquam iusto recusandae totam voluptatibus temporibus ipsum quasi. Nesciunt maiores sequi quis consectetur labore asperiores eaque hic ipsa!</p>
4

2 に答える 2

0

これを試してみてください。プレビューはここをクリック

サンプルコードを編集しました

HTML:

<div class="wrapper">
    <img src="http://placekitten.com/200/300" alt="" />
</div>
<h1>Interesting Title!</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat magnam culpa obcaecati numquam iusto recusandae totam voluptatibus temporibus ipsum quasi. Nesciunt maiores sequi quis consectetur labore asperiores eaque hic ipsa!</p>

CSS:

div.wrapper{
    display: inline-block;
    width:500px;
    height:400px;
    border:1px solid red;
    overflow:hidden;
}

img {
    width: 100%;
    height: auto;
}

h1, p {
    width: 80%;
    padding-left: 10%; 
}

画像の親要素は である必要がdisplay:inline-block;あり、幅は の幅になりますimg。

画像を配置したい場合は、画像の中心を表示したいとしましょう。画像にネガmargin-topを追加するだけです。プレビューはここをクリック

img {
    width: 100%;
    height: auto;
    margin-top:-100px;
}
于 2013-04-19T11:13:12.843 に答える
0

歪みを避けるために、これにはjQueryを使用するのが最善だと思います。

これにはjQuery Supersizedプラグインを使用できます。これは、幅の 100% をカバーするグラウンドを持つサイトで主に使用される有名なプラグインの 1 つです。

サイトへのリンクは次のとおりです- http://buildinternet.com/project/supersized/

于 2013-04-19T11:09:33.343 に答える