質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1409閲覧

レスポンシブ対応 画面幅の増減に応じて画像の領域が左右から均等に増減するにはどうしたら良いでしょうか?

yuiran

総合スコア15

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/09/23 13:47

Airbnbの以下のサイトの模写をしているのですが、画像部分のレスポンシブの表現がうまくいきません。

https://www.airbnb.jp/work?_set_bev_on_new_domain=1598171946_ZDVjZTgyMWFjMDQy

例えば、出張先でも、アットホームの左側にある画像なのですが、((ソファで女性がPCを広げている)
携帯〜、743pxくらいの画面幅では、検証ツールで画面幅を狭くしていくと、画像の中央は変わらず、左右から均等に見切れていきま。744p以上の画面幅でも同様に、画面幅を大きくしていくと、左右から見える範囲が均等に増えていきます。

このように画像を表現するにはどのようなCSSを書けば良いのでしょうか?

現在は、以下のように記述しています。

img{
width: 100%;
height: auto;
object-fit: cover;
}

これだと、ただ単に、画像の見える領域は変わらず、均等に拡大縮小していっている状態です。

お知恵を貸していただけますと幸いです。
よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Zuishin

2020/09/23 13:56

URL の後ろのほうについてるのはアフィリエイトの何かですか?
kuma_kuma_

2020/09/23 16:15

> 画像部分 URLに移動すると背景で動画が再生されていますが動画部分ですか? (対象画像が見つかりません。)
yuiran

2020/09/24 01:13

Zuishinさん AirbnbのサイトのURLをそのままこちらにコピーしたのでアフィリエイト機能はついていないと思います。(Airbnbの方でつけていないのなら)
yuiran

2020/09/24 01:15

kuma_kuma_さん 動画部分ではなく、その下にある画像で、上から4番め以降の画像の部分です。(ソファで女性がPCを広げている画像や、船を漕いでいる画像など)
guest

回答2

0

HTML

<div class="任意のクラス名 container-fluid"> <div class="row"> <div class="画像背景用クラス名 col-12 col-md col-lg">  </div> <!-- 画像背景用クラス名col-auto col-md-12 col-lg終わり--> </div> <!--row 終わり-->

CSS
画像背景用クラス名 {
width: 80%;
height: 380px;
padding: 30px;
background: url('画像のURL') no-repeat center;
margin-right: 15px;
margin-left: 10px;
background-size: cover;
}

投稿2020/09/26 04:32

yuiran

総合スコア15

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

こんにちは。

こんな感じでしょうか。

サンプル

html

1<div> 2<img src="..."> 3</div>

css

1div{ 2 height: 500px; 3} 4 5img{ 6width: 100%; 7height: 100%; 8object-fit: cover; 9}

投稿2020/09/24 03:18

Lhankor_Mhy

総合スコア36960

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yuiran

2020/09/26 04:29

ありがとうございます!そちらでも試してみようと思います。過去の講義ノートを見ていたらバックグラウンドで指定する方法でも実現できたので、自分得できた解決方法のところに載せておきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問