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

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

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

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

2回答

3396閲覧

同じ画像を使ってPCとスマホでアスペクト比を変えて表示したいです。

h-o

総合スコア134

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

2クリップ

投稿2017/09/22 07:11

###やりたいことの詳細
現状
PCで表示した時に調度いい大きさのにつくった画像をスマホの表示時にも使っているため、画像1の赤枠にあるようにスマホで見たときに画像が小さく表示されます。

やりたいこと
そこで、スマホで表示するときには、画像の両端が画面の端に はみ出すようにして画像2のように表示したいです。
この時アスペクト比を保ちつつ、画面サイズが変化しても常に画像が左右中央に来るようにするにはどうすればよいでしょうか?
(同じ画像を使って表示領域だけを変える)

画像1(現状の画像/スマホで表示した時)
イメージ説明

画像2(これくらいの大きさにしたい/スマホで表示した時)
イメージ説明

問題のページ
http://wonect.com/sg/brand/hario.html

やってみたこと
以下のようにcssを追加してなんとなく真ん中に持ってきましたが画面サイズが変わると微妙に真ん中からズレるようです。

element.style { width: 140%; margin-left: -20%; }

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

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

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

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

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

guest

回答2

0

ベストアンサー

object-fitとか。とりあえずスマホ(iOS/Android)は対応しています。

CSS

1.category-description.std img { 2 object-fit: cover; 3 height: 50vw; 4 width: 100%; 5}

【Can I use... Support tables for HTML5, CSS3, etc】
http://caniuse.com/#feat=object-fit

【object-fit - CSS | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/object-fit

【1行追加でOK!CSSだけで画像をトリミングできる「object-fit」プロパティー | Webクリエイターボックス】
https://www.webcreatorbox.com/tech/object-fit

【一歩先行くCSS - object-fitとobject-position | CodeGrid】
https://app.codegrid.net/entry/css-object

投稿2017/09/22 08:00

kei344

総合スコア69364

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

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

h-o

2017/09/22 08:08

実際のコードまで書いていただき誠にありがとうございます。 まさにこれです。 ありがとうございます。関連記事も読ませていただきます。
guest

0

例えばでこんなフィールドだったとする。

HTML

1<div class="top"> 2 <img src="example.jpg" /> 3</div>

CSS

1.top { 2 width: 100%; 3 text-align: center; 4 overflow: hidden; 5}

画像は基本的にインライン要素なんでtext-align: center;を指定してやれば中央に、
そしてポイントは「overflow: hidden;」だね。

これのお陰で左右が見切れても俺しらーねという扱いになって上手く扱えるはず。
その代わり、imgのサイズは絶対指定にしないと駄目になるけどね。

投稿2017/09/22 07:58

miyabi-sun

総合スコア21158

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

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

h-o

2017/09/22 08:07

返信をいただき誠にありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問