css/bootstrap : webサイト用写真

bootstrapとは直接関係がないとも思いますが、webサイト用の写真は、元のサイズ（縦横の意味）など気をつけるべき点があるのでしょうか。

どうしても、元の写真から歪んでしまいます。。一例ですが以下の通り、元の写真を掲載すると横に膨らんでしまいます。コード（css）の書き方に問題があるのか、元々の写真がいけないのかわからず、初歩的な質問とは思いますが、御指南頂けますと幸甚です。

例えばですが、このサイトはPCのフル画面で見ても、スマホで見ても綺麗に写真が写っています。

http://www.mitsui.com/jp/ja/

ikedas

2016/11/12 16:08

コード (写真を掲載しているHTMLファイルの該当箇所など) を示して下さい。

行動規範の内容に同意します

回答2件

実際の画像を見ていないのでなんとも言えませんが、
コードと解像度の両方が原因だと思います。

例えば、三井物産様のサイトでは解像度が「Natural: 1920 × 1080 pixels」の写真を使用しています。
そして、ウィンドウサイズを変更すると解像度の縦横比に合わせて拡大縮小されます。

・画像の縦横比を維持したまま拡大縮小を行っていること。
・高解像度(フルHD)の画像を使用していること。

上記2点の要素があることで、綺麗に表示される仕組みとなっています。

投稿2016/11/12 16:08

mukkun

総合スコア882

ベストアンサー

キャプチャを貼った画像が、HTMLにimg要素で埋め込まれているのか、
それともCSSで背景画像として表示しているのかわかりませんが、
いずれにせよ元画像の縦横比率を維持したまま拡大縮小するようなコードになっていないのが原因と思われます。

▼img画像の場合

CSS
1img {
2  width: 100%; /*画像自身のサイズを超えて拡大させたい場合*/
3  height: auto;
4}
5または
6img {
7  width: max-width: 100%; /*画像自身の幅を最大としてそれ以上拡大させたくない場合*/
8  height: auto;
9}

▼CSS背景画像の場合

CSS
1.selector {
2  background:url(xxxx.jpg) no-repeat;
3  background-size: cover; /*親要素全体を背景で覆うようにしたい場合*/
4}
5または
6.selector{
7  background: url(xxxx.jpg) no-repeat;
8  background-size: contain; /*親要素の中に背景が全て収まるようにしたい場合*/
9}