1

数週間前、私はこのサイトで作業していました。これは私の次のポートフォリオサイトです。完成したら、この構造を作りたいと思います。

  • ヘッダ
  • フローティング高さの水平方向の画像ギャラリー
  • フッター

写真家向けの22slides.comポートフォリオサイトのように、似たようなものを作りたいと思っています。ブラウザのウィンドウサイズを変更するか、全画面ボタンを押すと、img要素または画像のdivが自動的に高さを変更します。

画像が元の解像度より大きくならないように、CSSに「max-height」パラメーターを設定しました。これは、巨大な解像度の画面では深刻な問題です。しかし、Chromeでは、アスペクト比が間違っているため、正しく機能していません。フルスクリーンを押すと、アスペクト比がさらに悪くなります。他のすべての最新ブラウザ（Firefox、Safari、Opera、IE8-9）では正常に動作しています。このコマンドを使用して、Chrome専用のカスタムCSSを作成しました（ただし、Chromeのアスペクト比の問題を示すために、これをHTMLでコメント解除しました）。

#portfolio img { max-height: none; }

したがって、この線を使用すると、Chromeで可能な限り最大の高さとアスペクト比を使用した画像が正しくなります。しかし、それは私にとって問題です。1024x683pxの画像がFullHDモニターで実際の解像度よりも大きく表示されることを望んでいません。

すべての画像の幅と高さを動的に記述し、元のアスペクト比を維持するjavascriptがある場合、最善の解決策だと思います。22slides.comは同様のJavaScriptを使用していますが、私はJavaScriptプログラマーではありません。:(

画像のHTML構造：

<div id="portfolio">
    <img src="image1.jpg" alt="" />
    <img src="image2.jpg" alt="" />
</div>

CSS（Chromeの問題を示すために、max-heightはごくわずかな数値です）：

#portfolio { white-space: nowrap; float: left; }
#portfolio img { height: 100%; width: auto !important; min-height: 150px; max-height: 350px; }

このJqueryJavascriptを使用して、画像の高さを動的に変更し、130pxの負の高さで画面上の画像のオーバーフローを元に戻しています。おそらくこのスクリプトが問題を引き起こしているわけではありません。オフにすると、Chromeのアスペクト比がさらに悪くなるためです。

// Dynamical vertical resizing on images and Correct the height (to not overflow the screen)
$(document).ready(function(){
    $(window).load(function(){ // On load
    $('#portfolio img').css({'height':(($(window).height())-130)+'px'}); // Adjust the number if you change something in CSS
    });
    $(window).resize(function(){ // On resize
    $('#portfolio img').css({'height':(($(window).height())-130)+'px'}); // Adjust the number if you change something in CSS
    });
});

私は助けが必要です！ありがとう！

アップデート：

「 EmphramStavanger」と「nick_w」によって書かれたこのJavaScriptは、ブラウザの高さの問題に対する私の画像の適合を解決しているようです。

試してみましたが、1つの画像で完全に機能しています。正しいアスペクト比で、利用可能なビューポートウィンドウに完全に収まる画像！「EmphramStavanger」によって作成された問題の視覚的な説明があります： http ：//www.swfme.com/view/1064342

JsFiddleデモ（基本的にはEmphram Stavangerのコードです。nick_Wによる変更を追加し、Jqueryを最新に変更し、ショーリンクの後に追加しました。

http://jsfiddle.net/YVqAW/show/

横スクロールの画像サイトはまだ試していませんが、もう大きな一歩です！

更新2：

解決策：https ：//stackoverflow.com/questions/20303672/horizo​​ntal-image-slideshow-javascript-not-working-properly-with-portrait-oriente

（そしてまた助けが必要です...）:)

4

1 に答える 1

1

少し遅れましたが、div を background-image で使用し、img タグの代わりに background-size: を設定できます。

div.image{
    background-image: url("your/url/here");
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
}

これで、div サイズを任意に設定するだけで、画像の縦横比が維持されるだけでなく、垂直方向と水平方向の両方で中央に配置されます。

ただし、background-size プロパティは ie>=9 のみです。

于 2013-05-30T14:03:30.253 に答える