0

私のメインページには、ブラウザのサイズ変更で動き回ったり、ラップアラウンドしたりする画像があります。ブラウザが小さい場合、画像が右から切り取られるように変更したいだけです。

私は無駄にいくつかのことを試しました：

  1. div id の floatrightと相対位置を削除しますright-image

  2. div id の最小幅を試してくださいright

  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だと思います。しかし、それだけでは不十分な場合、私が話している Web サイトは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 の場合、左 div の下には決して入りません

于 2013-04-02T20:30:51.260 に答える