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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

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

Q&A

解決済

1回答

2585閲覧

レスポンシブで内接リサイズのような見た目を実現したい

groco

総合スコア20

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

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

0グッド

0クリップ

投稿2017/07/09 10:25

編集2017/07/09 12:56

不揃いの画像を縦積みにして複数配置し、下記のように表示させたいと考えております。

・画像と画像の間は20px固定で余白を入れる
・横サイズは最大300pxで表示
・縦サイズは最大200pxで表示

内接リサイズを使って実現できないかと試してみましたが「max-width」と「max-height」だと、画像サイズが親要素よりも大きい場合に画像が親要素からはみ出してしまいます。

しかし、「width」と「height」だとウィンドウサイズが変わった時に幅が固定されてしまいウィンドウからはみ出してしまいますし、画像の縦サイズが親要素の指定よりも小さい場合には「画像と画像の間は20px開ける」が実現できません。
(20pxよりも大きく開いているように見えてしまいます)

css

1.image { 2 max-width: 300px; 3 max-height: 200px; 4 margin-bottom: 20px; 5} 6 7.image img { 8 width: auto; 9 height: auto; 10 max-width: 100%; 11 max-height: 100%; 12}

対象ブラウザはie9以上、他ブラウザは最新版(iphone/android含む)でこのような見た目をcssのみで実現することは可能でしょうか?

もしcssのみでの実現が難しい場合にはjsなどを用いれば可能でしょうか?

何卒よろしくお願いいたします。

【現状】
現状

【表示させたいイメージ】
表示させたいイメージ

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

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

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

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

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

kei344

2017/07/09 11:51

現在どのような状態になっているかと、それをどうしたいのかのスクリーンショットを提示いただけませんか?
groco

2017/07/09 12:58 編集

ご確認くださりありがとうございます。 イメージ画像を添付させていただきました。 こちらでイメージが伝わるでしょうか・・・? 何卒よろしくお願いいたします。
guest

回答1

0

ベストアンサー

高さが固定すれば良いわけなので、vw で指定してしまうとか。

CSS

1.image { 2 text-align: center; 3 margin: 20px auto; 4} 5 6.image img { 7 max-width: 40vw; 8 max-height: 28vw; 9} 10```**動くサンプル:**[https://jsfiddle.net/f3h3xcLp/](https://jsfiddle.net/f3h3xcLp/) 11 12--- 13 14【[CSS]ビューポート(vw, vh)とパーセント(%)、レスポンシブに適した単位の賢い使い分け方法 | コリス】 15[http://coliss.com/articles/build-websites/operation/css/viewport-vs-percentage-units-by-ire.html](http://coliss.com/articles/build-websites/operation/css/viewport-vs-percentage-units-by-ire.html)

投稿2017/07/09 13:24

kei344

総合スコア69364

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

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

groco

2017/07/09 15:25

動くサンプルまで作成いただきありがとうございます! なるほど、vw を使うとウィンドウサイズに応じてサイズが変わってくれるからこういう動きが実現できるのですね。 この方法で実装したいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問