2

ズーム付きの画像表示のあるポートフォリオページがあります。私はこのコードを持っています: http://codepen.io/Mpleandro/pen/LvrqJ

画像を表示する div のクラスは.display, HTML の 13 行目であり、この div の CSS フォーマットは 90 行目です。

画像の幅は柔軟になるので、含まれている div が画像の幅を継承するようにする必要があります。

css プロパティauto、inheritおよびを試しましたmin-withが、何も機能しません!

誰かが私を助けることができますか？

PS: レスポンシブ ソリューションが必要です。

ありがとう

4

4 に答える 4

0

完璧な答えを出す方法はわかりませんが、正しい方向に送ることができれば幸いです。inherit第一に、あなたはそれらがあなたが望むものではないことを忘れることができmin-widthます。

autoはデフォルト値であり、デフォルトの動作はあなたが望むものに非常に近いと思います：divの幅はその内容に適応します。これが現在の動作ではない場合、これはそのdivの配置を含む他の多くの理由によるものです。<div class="display">重要なのは、 CSSだけでは、特定の明示的な幅の宣言が必要になるため、適切な中央揃えとサイズ設定ができないということです。

すでにJavascriptを使用して適切な画像を表示/非表示にしているため、ボックス内の画像を変更するたびにJavascriptを使用して幅を設定できます。

私の最善のアドバイスは、テストされ、承認され、本当に見栄えのする既存のソリューションを使用することです。2秒のグーグル検索はあなたが試すことができるフェスコを私に示しました。

于 2013-01-20T22:56:06.577 に答える
0

最も簡単な解決策は、 に設定.displayすることdisplay: inline-block;です。これにより、サイズが含まれている画像に調整されます。応答性も高めたい場合はmax-height: 80%、たとえば で上限を定義する必要があります。

まとめると、次のようになります: http://codepen.io/anon/pen/IluBt

JS 17 行目:

$(".display").css("display","inline-block");

のCSS.display

.display {
    position: relative;;
    background: rgba(255,255,255,0.5);
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    max-height:80%; /* <-- limit the height */
    top:10%;
    left:0;
    margin:auto;
}

そして、すべてをうまく整列させるには:

.loader {
    color: red;
    position: fixed;
    width: 100%; height: 100%;
    background: rgba(0,0,0, 1) url(../http://www.mpleandro.com.br/images/new/loader.gif) no-repeat center center;
    text-align: center;
}
于 2014-06-05T12:23:27.240 に答える
0

これがあなたの言いたいことかどうかはわかりませんが、もしそうなら、それが助けになることを願っています!

画像で div を塗りつぶしたいが、ブラウザーに合わせてスケーリングする場合は、div の幅を設定してみてください。次に、max-width="100%"; height: auto;画像に適用します。

于 2013-01-21T01:07:36.993 に答える