0

画像を配置しようとしたときに少し問題が発生しました。希望どおりに表示されず、数時間答えを探していました。私は自分の写真を矢印の点で ここに画像の説明を入力 表示したい: この画像を 100% 幅にしたいのですが、思い通りに見せることができません。私が比較できるクローゼットは、Facebookのカバー写真です（上部のメニュー、大きな画像、いくつかの小さなsoundclouds、および私がすでに持っているようなFacebook ;)）。そして私の英語でごめんなさい:s

---- 私の html (読めない場合は申し訳ありませんが、リクエストに応じてすべてをコピーしてアップロードします) ----

<html>
<head>
<link rel="stylesheet" id="default-css" href="default.css" type="text/css" media="all">
</head> 
<div id="cover-image" class="clearfix"></div>
<footer id="site-footer">
<iframe  width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F83233916"></iframe>

<object height="81" width="100%"> 
    <param name="movie" value="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F83233916&amp;show_comments=true&amp;auto_play=false&amp;color=343538&amp;theme_color=343538&amp;show_user=true&amp;show_bmp=true&amp;show_artwork=true&amp;show_bmp=true"></param> 
<param name="allowscriptaccess" value="transparent"></param> 
<embed allowscriptaccess="always" height="81" src="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F83233916&amp;show_comments=true&amp;auto_play=false&amp;color=343538&amp;theme_color=34353&amp;show_user=true&amp;show_bmp=true&amp;show_artwork=true&amp;show_bmp=true" 
    type="application/x-shockwave-flash" width="100%"></embed>
</object>
- Control areal -
<div class="plugin_example" id="u_0_9"><div data-href="http://www.facebook.com/DjSalling"data-send="true" data-show-faces="true" data-colorscheme="dark" class="fb-like >dark_background fb_edge_widget_with_comment fb_iframe_widget" fb-xfbml->state="rendered><span width="100%" height="61"><iframe id="f30076c07" name="f2303a14a8" scrolling="no" style="border: none; overflow: hidden; height: 61px; width: 100%;" title="Like this content on Facebook." class="fb_ltr" src="http://www.facebook.com/plugins/like.php?api_key=113869198637480&amp;locale=da_DK&amp;sdk=joey&amp;channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D22%23cb%3Df20c4c7538%26origin%3Dhttp%253A%252F%252Fdevelopers.facebook.com%252Ff5cc88ac%26domain%3Ddevelopers.facebook.com%26relation%3Dparent.parent&amp;href=http%3A%2F%2Fwww.facebook.com%2FDjSalling&amp;node_type=link&amp;width=450&amp;layout=standard&amp;colorscheme=dark&amp;show_faces=true&amp;send=true
&amp;extended_social_context=false"></iframe></span></div></div>
</footer>
</body>
</html>

---- CSS ----

#cover-image {
      background-image: url(background_cover.jpg);
      background-repeat: no-repeat;
      background-position: left top;
        }

#site-footer { position: relative; 
    position: absolute: bottom;
    background: url(footer-divider.png) center top no-repeat;
    background-size: 100%;
    margin: 0px 0 200px 0;
    padding: 27px 0 0;
    clear: both;
        }

    #inner-footer { 
    position: absolute;
    bottom: 0;
    left: 0; 
        }

        #inner-footer .content {
            color: #bcbcbc;
            background: #272729;
            background: rgba(0,0,0, 0.15);
            background-repeat: no-repeat;
            padding: 10px;

            height: 72px;

            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
        }

みんな、ありがとう ：）

編集:

@ 3rror404ありがとう、でも幅を100％にすると、画像のスケーリングはブラウザのサイズに合わせて移動し、2560x1600から自動的に縮小されますか？

#cover-image {
    width: 100%;
    height: 400px;
    background-image: url(background_cover.jpg);
    background-repeat: no-repeat;
    background-position: left top;

現在、高さは 400xp ですが、全体像を表示できるほどではありません。

ここでわかるように、幅は機能しますが、高さは機能しません

@Kamal私はあなたのcssを使用しましたが、ブラウザウィンドウを前後にドラッグすると、画像が途切れてしまい、狭いブラウザウィンドウではサウンドクラウドから画像まで大きなスペースがあります。

4

2 に答える 2

0

私はあなたの問題に従ったかどうか正確にはわかりません..しかし、背景プロパティとして設定している画像は、コンテナの幅に合わせて拡大縮小する必要があるということですか??

#cover-image {
width: 100%;
height: 400px;
background-image: url(background_cover.jpg);
background-repeat: no-repeat;
background-size:100%;
background-position: left top;

背景画像の幅をコンテナの幅に合わせる必要があります..これはあなたが探しているものですか?

于 2013-04-22T22:36:06.650 に答える
0

私が質問を正しく理解していれば、あなたが望むbackground-size: cover

#cover-image {
    height: 400px;
    background: url(background_cover.jpg) center center;
    background-size: cover;
}

これにより、アスペクト比を維持し、水平方向と垂直方向の中央に配置されたまま、背景画像がコンテナ全体を覆うようになります。

デモ(ブラウザのサイズを変更)

編集

OK、縦横比の維持を気にしないならbackground-size: 100% 100%

#cover-image {
    height: 400px;
    background: url(background_cover.jpg);
    background-size: 100% 100%;
}

これにより、画像を引き延ばしたり押しつぶしたりすることを意味する場合でも、背景画像がコンテナーの高さの 100%、幅の 100% にスケーリングされます。

デモ

于 2013-04-22T23:06:04.630 に答える