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

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

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

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

Q&A

解決済

2回答

2945閲覧

imgを元データー縦横比のまま縮小して表示したい

innjera

総合スコア132

CSS3

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

0グッド

0クリップ

投稿2017/07/13 23:53

編集2017/07/14 03:03

文書にすると分かりにくいのですが、添付画像の様なものを作っています。
下3枚の画像をクリックすると、上部の大きな画像の表示が切り替わる仕組みです。

上部はこれで良いのですが、下部に並んだ3枚のimgを元のimg通り、上下左右切り取らず全てそのまま表示したい(分かりやすくbackground:redにしてますが、この中に納めて、横長の写真も縦長の写真もそのまま表示したい)のですが、cssの書き方がわからず、ご教示頂けますと幸甚です。

cssのコードに記載の通り、imgwidth:100%としてheight:autoとしている部分が理由と思いますが、height:100%としてしまうと、当然、元imgの縦横比が歪んでしまいます。

イメージ説明

html

1### 下部3枚の部分のみ 2<div class="card-block lesson-img-list p-0" > 3 <ul class="thumb p-0 m-0"> 4 <li class="thumb1"> 5 <img src="/uploads/lesson_image/lesson_image/21/make_9.jpg"/> 6 </li> 7 <li class="thumb2"> 8 <img src="/uploads/lesson_image/lesson_image/45/make_10.jpg"/> 9 </li> 10 <li class="thumb3"> 11 <img src="/uploads/lesson_image/lesson_image/69/make_11.jpg"/> 12 </li> 13 </ul> 14</div>

css

1.card-block.lesson-img-list { 2 background-color: red; 3 height: 7rem; 4} 5.card-block.lesson-img-list .thumb li { 6 margin: 0; 7 padding: 0; 8 list-style: none; 9 display: inline-block; 10 width: 32%; 11 height: 7rem; 12 overflow: hidden; 13 position: relative; 14 cursor: pointer; 15} 16.card-block.lesson-img-list .thumb li img { 17 position: absolute; 18 width: 100%; 19 height: auto; 20 top: 50%; 21 left: 50%; 22 -webkit-transform: translate(-50%, -50%); 23 -ms-transform: translate(-50%, -50%); 24 transform: translate(-50%, -50%); 25} 26.card-block.lesson-img-list .thumb li:hover img { 27 opacity: 0.8; 28 filter: alpha(opacity=80); 29 -ms-filter: "alpha(opacity=80)"; 30} 31

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

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

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

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

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

kei344

2017/07/14 01:30

SCSSではなく出力されたCSSを提示されたほうが回答を得やすいと思います。
innjera

2017/07/14 03:04

失礼いたしました。CSSに変更いたしました。
guest

回答2

0

imgタグである必要なければ、liタグの背景画像にしてしまう方法とかどうでしょうか?

html

1<li class="thumb1" style="background-image:url('hoge.jpg')"></li>

css

1li { 2 background-repeat: no-repeat; 3 background-position: center center; 4 background-size: contain; 5}

投稿2017/07/14 02:33

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

innjera

2017/07/26 05:44

回答が遅れてしまい申し訳ありません。大変参考になりました!
guest

0

ベストアンサー

画像の高さのみで制限するとか。3つの画像を足した幅が全体幅を超えるときは少し切れますが。

CSS

1.card-block.lesson-img-list { 2 background-color: red; 3 height: 7rem; 4} 5.card-block.lesson-img-list .thumb { 6 display:flex; 7} 8.card-block.lesson-img-list .thumb li { 9 margin: 0; 10 padding: 0; 11 list-style: none; 12/* 13 display: inline-block; 14 width: 32%; 15*/ 16 height: 7rem; 17 overflow: hidden; 18 position: relative; 19 cursor: pointer; 20} 21.card-block.lesson-img-list .thumb li img { 22 height: 100%; 23} 24/* 25.card-block.lesson-img-list .thumb li img { 26 position: absolute; 27 width: 100%; 28 height: auto; 29 top: 50%; 30 left: 50%; 31 -webkit-transform: translate(-50%, -50%); 32 -ms-transform: translate(-50%, -50%); 33 transform: translate(-50%, -50%); 34} 35*/ 36.card-block.lesson-img-list .thumb li:hover img { 37 opacity: 0.8; 38 filter: alpha(opacity=80); 39 -ms-filter: "alpha(opacity=80)"; 40} 41```[https://jsfiddle.net/mreo4ahg/](https://jsfiddle.net/mreo4ahg/)

投稿2017/07/15 11:20

kei344

総合スコア69364

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

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

innjera

2017/07/26 05:45

返答が遅れ申し訳ありません。大変参考になりました
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問