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

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

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

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

CSS

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

Q&A

解決済

1回答

1079閲覧

画像の大きさと合わせたい

tunnel

総合スコア30

HTML

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

CSS

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

0グッド

1クリップ

投稿2018/11/02 10:15

編集2018/11/02 11:28

2つ、画像のサイズと合わせたいものがあります。
レスポンシブにしたいので画面サイズに伴って大きも変化させたいです。
bootstrapのグリッドを使ってます。
#カラーボックス
(newsBox-)1〜6まであるうち2だけが画像ではなく背景に色をつけただけのカラーボックスになってます。
2にはhtmlでstyleタグで画像のデフォルトサイズを指定してあり、双方cssは{width: 100%, height: auto}にしてるのですが2だけサイズが違います。
#:before
:beforeで画像に被せてる半透明の黒幕です。

html

1<div class="newsBox row"> 2 <div class="newsBox-1 newsB col-xs-12 col-sm-6 col-md-4"> 3 <a href=""> 4 <div class="img"> 5 <img src="img/news.kei1.jpg"> 6 <h3>FROM KEI<br>2018.10.10</h3> 7 </div> 8 <div class="text"> 9 <p>【お知らせ】インタビュー(2回戦終了後)/男子テニスATPワールドツアー マスターズ1000 上海</p> 10 <p>大会第4日、2回戦 ウー・イービンとの戦いに勝利した錦織選手のインタビュー。※日本語は後半部分となります▶錦織圭 インタビュー(2回戦終了後)/男子テニスATPワールドツアー マスターズ1000 上海今すぐ動画をチェック!⇒</p> 11 </div> 12 </a> 13 </div> 14 <div class="newsBox-2 newsB col-xs-12 col-sm-6 col-md-4"> 15 <a href=""> 16 <div class="img-2"> 17 <div class="img-box" style="width: 500px;height: 306px"></div> 18 <h3>RESULT</h3> 19 </div> 20 <div class="text"> 21 <p>上海 ロレックス・マスターズ</p> 22 <p>準決勝ロジャー・フェデラー(スイス)</p> 23 </div> 24 </a> 25 </div> 26 <div class="newsBox-3 newsB col-xs-12 col-sm-6 col-md-4"> 27 <a href=""> 28 <div class="img"> 29 <img src="img/news.kei3.jpg"> 30 <h3>FROM KEI<br>2018.10.06</h3> 31 </div> 32 <div class="text"> 33 <p>【お知らせ】インタビュー(準決勝直後オンコート)/楽天ジャパンオープンテニス2018</p> 34 <p>大会第6日、準決勝に勝利し、同大会で4年ぶりの決勝進出を決めた錦織選手の試合直後のインタビュー!難敵リシャール・ガスケ選手との戦いを振り返るとともに、ダブルスに出場している内山選手へエールを送りました。▶錦織圭 インタビュー(準決勝直後オンコート)/楽天ジャパンオープンテニス2018動画をチェック!⇒</p> 35 </div> 36 </a> 37 </div> 38 <div class="newsBox-4 newsB col-xs-12 col-sm-6 col-md-4"> 39 <a href=""> 40 <div class="img"> 41 <img src="img/news.kei4.jpg"> 42 <h3>FROM KEI<br>2018.10.06</h3> 43 </div> 44 <div class="text"> 45 <p>【お知らせ】インタビュー(準々決勝直後オンコート)/楽天ジャパンオープンテニス2018</p> 46 <p>大会第5日、準々決勝に勝利し、ベスト4進出を決めた錦織選手の試合直後のインタビュー!期待の若手、ステファノス・チチパス選手をストレートで下した、「いいテニスができていた」戦いを振り返りました。▶錦織圭 インタビュー(準々決勝直後オンコート)/楽天ジャパンオープンテニス2018今すぐ動画をチェック!⇒</p> 47 </div> 48 </a> 49 </div> 50 <div class="newsBox-5 newsB col-xs-12 col-sm-6 col-md-4"> 51 <a href=""> 52 <div class="img"> 53 <img src="img/news.kei5.jpg"> 54 <h3>FROM KEI<br>2018.10.04</h3> 55 </div> 56 <div class="text"> 57 <p>【お知らせ】インタビュー(2回戦直後オンコート)/楽天ジャパンオープンテニス2018</p> 58 <p>大会第3日、2回戦に勝利した錦織選手の試合直後のインタビュー!「出だしはむちゃくちゃ良かった」というブノワ・ペール選手との戦いを振り返りました。▶錦織圭 インタビュー(2回戦直後オンコート)/楽天ジャパンオープンテニス2018今すぐ動画をチェック!⇒</p> 59 </div> 60 </a> 61 </div> 62 <div class="newsBox-6 newsB col-xs-12 col-sm-6 col-md-4"> 63 <a href=""> 64 <div class="img"> 65 <img src="img/news.kei6.jpg"> 66 <h3>FROM KEI<br>2018.10.02</h3> 67 </div> 68 <div class="text"> 69 <p>【お知らせ】インタビュー(2回戦直後オンコート)/楽天ジャパンオープンテニス2018</p> 70 <p>大会第1日、1回戦に勝利した錦織選手の試合直後のインタビュー!杉田祐一選手との戦いを振り返りました。▶錦織圭 インタビュー(1回戦直後オンコート)/楽天ジャパンオープンテニス2018今すぐ動画をチェック!⇒</p> 71 </div> 72 </a> 73 </div> 74  </div>

css

1.newsB { 2 background-color: #fff; 3 border-radius: 5px; 4 padding: 0 1px; 5} 6 7.img-box { 8 width: 100%; 9 height: auto; 10 background-color: lightgreen; 11 overflow: hidden; 12} 13 14.img, .img-2 { 15 position: relative; 16 overflow: hidden; 17 width: 100%; 18} 19 20.img img { 21 width: 100%; 22 height: auto; 23 vertical-align: bottom; 24 transition: transform 0.2s linear; 25 -webkit-transition: transform 0.2s linear; 26} 27 28.newsB a:hover .img img { 29 transform: scale(1.1,1.1); 30 -webkit-transform: scale(1.1,1.1); 31} 32 33.img:after { 34 content: ''; 35 width: 500px; 36 height: 306px; 37 background: rgb(0,0,0,0.7); 38 position: absolute; 39 top: 0; 40 left: 0; 41 transition: 0.2s; 42} 43 44.newsB a:hover .img:after { 45 background: rgb(0,0,0,0.3); 46} 47 48.newsB a:hover .img-box:after { 49 content: ''; 50 width: 500px; 51 height: 306px; 52 position: absolute; 53 top: 0; 54 left: 0; 55 background: rgb(0,0,0,0.5); 56}

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

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

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

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

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

yoshinavi

2018/11/02 10:36

提示のコードでは「newsBox-2」以外の画像サイズが不明ですが、サイズが統一されるのですか?であれば、それに合わせれば良いのでは?
tunnel

2018/11/02 10:42

全て基本サイズは500×306です。レシポンシブにしたいのでそれだとnewsBox-2だけサイズがおかしくなってしまいます。
yoshinavi

2018/11/02 10:52

レスポンシブ対応ですね。理解不足ですみませんでした。Bootstrapでしょうか?であればタグに追加されると良いかと思います。
tunnel

2018/11/02 10:55

yoshinaviさんのコメントを参考に先ほどhtmlにstyleタグでやってみましたがなぜか出来ませんでした。
tunnel

2018/11/02 10:57

コード貼り直します
yoshinavi

2018/11/02 11:57

今は検証できない状況なのですみませんが、考え方として、imgのレスポンシブではなく、対象boxをレスポンシブ対応させる必要があります。「box レスポンシブ」でいくつかの方法が出ると思いますので、理解しやすい方法を試してみてください。
退会済みユーザー

退会済みユーザー

2018/11/03 05:17

JSFiddleなどで状況を再現してください。提示されたコードでは再現しないけど、提示してないコードでは再現する…ということを防げますし、問題の切り分けにもなるので。
guest

回答1

0

自己解決

padding-topで、表示したい大きさの縦/横*100を%で指定することで高さを出せてレスポンシブにも対応させることができました。

投稿2018/11/05 06:09

tunnel

総合スコア30

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問