0

私は通常質問する人ではありませんが、CSS/CSS3 を使用してこれを行うことはできないようです。

resize のようにあまりサポートされていない CSS3 スタイルでも満足できることに注意してください。

そのためのjsFiddle。

現在のサイズ変更できないコード:

HTML:

<div id="boxes">
  <a id="about1" class="aboutbox" href="/property-for-sale">
  &#160;</a>
  <a id="about2" class="aboutbox" href="/why-cyprus">&#160;</a>
  <a id="about3" class="aboutbox" href="/why-zantis">&#160;</a>
  <span class="stretch">&#160;</span>
</div>

CSS:

#boxes {
    padding: 70px 0 70px 0;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}
.aboutbox {
    padding: 0;
    margin: 0;
    display: inline-block;
    *display: inline;
    zoom: 1;
    width: 320px;
    height: 225px;
    vertical-align: top;
    text-align: left;
    background-size: auto auto;
}
#about1 {
    background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg') no-repeat center center;
}
#about2 {
    background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg') no-repeat center center;
}
#about3 {
    background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg') no-repeat center center;
}
#about1:hover {
    background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT_a.jpg') no-repeat center center;
}
#about2:hover {
    background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT_a.jpg') no-repeat center center;
}
#about3:hover {
    background:#000 url('http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT_a.jpg') no-repeat center center;
}

HTML パネルのサイズを変更すると、期待どおりにフロートすることがわかります。親divに沿って均等に分散するために、一般的な方法を使用しています。また、CSS を使用して、ホバー効果のある画像ボタンを作成しています (グラフィックの性質について尋ねないでください..)。

HTMLパネルのサイズが変更されたときに、それに応じてこれらのサイズを変更したいと思います。つまり、実際のボタンを縮小して 1 行にとどめます。

私はjQueryを使った実用的なソリューションを持っていますが、それなしでこれを得るのに時間を費やし、どこにも行きませんでした. 何か案は？

ティア。

4

4 に答える 4

1

1 つの解決策は、背景画像を実際の画像に置き換えることです。css を使用して、表示する画像を制御し、含まれる要素に基づいてサイズを変更します。boxesしたがって、コンテナに基づいてサイズ変更される div で各リンクをラップします。css を使用して、content:セレクターを使用して画像の URL を設定します。

http://jsfiddle.net/CPNbS/6/

結果の html は次のようになります。

<div id="boxes">
    <div class="link" id="about1">
        <a class="aboutbox" href="/property-for-sale"><img /></a>
    </div>
    <div class="link" id="about2">
        <a class="aboutbox" href="/why-cyprus"><img /></a>
    </div>
    <div class="link" id="about3">
        <a class="aboutbox" href="/why-zantis"><img /></a>
    </div>
</div>

そしてCSS：

.link{width:30%;height:100%;border:1px solid green;display: inline-block;
    *display: inline;
    zoom: 1;}

.link a{padding: 0;
    margin: 0;
    display:block;
    width: 100%;
    height:100%;
    vertical-align: top;
    text-align: left;
    background-size: auto auto;}

.link a img{max-width:100%;}

#about1 a img{
    content:url("http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg");
}
#about2 a img{
    content:url("http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg");
}
#about3 a img{
    content:url("http://zantisgroup.com.cy/templates/oneweb/images/SEA_FRONT.jpg");
}
#about1:hover a img,#about2:hover a img,#about3:hover a img{
content:url("http://blogs.mathworks.com/pick/files/zebrainpastelfield.png");

}

メディア クエリを含めることで、レスポンシブ デザイン手法を使用することもできます。ただし、これはサイズ変更ではなく、さまざまなデバイス向けであるため、「流動的」には見えません。

お役に立てれば...

于 2013-05-03T02:23:08.097 に答える
1

設定した背景画像でこれを行うには、各アイテムの幅設定を取り除き、背景画像のサイズを background-size: 100% 100%; で変更する必要があります。.aboutboxes の高さと幅の比率を維持するには、ここで固有の比率法をパーセンテージ ベースのパディング ボトムと共に使用します。詳細はこちら: http://alistapart.com/article/creating-intrinsic-ratios-for-video

.aboutbox {
    position: relative;
    padding-bottom: 70.3125%;
    display: block;
    width: auto;
    height: 0;
    background-size: 100% 100% !important;
}

必要に応じて、ラッパーに最大幅またはパディングを含めて、ストレッチの範囲を制限できます。

ここでフィドルを更新しました：http://jsfiddle.net/carasin/s4pUe/11/

background-size の制限付き IE サポートに注意してください: http://caniuse.com/#feat=background-img-opts

于 2013-05-03T17:52:07.917 に答える