🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
CSS3

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Smarty

Smartyは、PHPアプリケーションで使用されるテンプレートエンジンです。

CSS

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

Q&A

解決済

1回答

1465閲覧

imgのサイズ指定をしているが反映されない状況。画像を拡大したい

21120903ryosuke

総合スコア7

CSS3

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

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Smarty

Smartyは、PHPアプリケーションで使用されるテンプレートエンジンです。

CSS

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

0グッド

0クリップ

投稿2021/02/01 08:09

添付画像のNopictureの画像を
下の方へ表示を拡大させたいのですが、反映されず

css

1 .thumbnail img{ 2 width: 100%; 3 height: auto; 4} 5

を入力してみたのですが、やはり反映がされません。
イメージ説明

imgのサイズ指定以外に、不足してる指定があれば
教えてください。

css

1@media(max-width:779px){ 2.thumbnail { 3 background-color:#ffffff; 4 border: 1px solid; 5 border-color: #afaeae; 6 width: 48%; 7 height: auto; 8 text-align: center; 9} 10 11} 12@media(min-width:780px){ 13.thumbnail { 14 background-color:#ffffff; 15 border: 1px solid; 16 border-color: #afaeae; 17 width: 100px; 18 height: 100px; 19 text-align: center; 20} 21 22 .thumbnail img{ 23 width: 100%; 24 height: auto; 25}

html

1 <!-- 商品一覧(一覧形式の例) --> 2 <{section name=key loop=$goodslist}> 3 <!-- 1商品ずつの定義 --> 4 <div class="goodslist_box"> 5 <table border="0" width="100%"><tr valign="top"> 6 7 <td width="100%" align="center"><div class="thumbnail"><a href="<{$goodslist[key].url}>"><{if $goodslist[key].thumbnail}><img src="<{$goodslist[key].thumbnail}>"><{else}><img src="/tpl_img/proto_ja/nopic100.gif"><{/if}></a></div></td> 8 9 <td> 10 <a href="<{$goodslist[key].url}>"><{$goodslist[key].name}><{if $goodslist[key].num != ''}>(<{$goodslist[key].num}>)<{/if}></a><{if $goodslist[key].embargo}>&nbsp;*不能发送到日本以外的国家<{/if}><br> 11 <{$goodslist[key].price2}>&nbsp;<{$tsuka_tani}><br> 12 <{$goodslist[key].setsumei|mb_truncate:50}> 13 <!-- カートボタンフォーム --> 14 <div align="right"> 15 <form action="<{$cart_acturl}>" method="post"> 16 <{$goodslist[key].cart_hidden}> 17 <{section name=key2 loop=$goodslist[key].opt}> 18 <{$goodslist[key].opt[key2].name}> 19 <select name="goods_opt[]"> 20 <{html_options values=$goodslist[key].optv[key2].id output=$goodslist[key].optv[key2].name}> 21 </select><br> 22 <{/section}> 23 <!-- 在庫がない時はカートボタンを表示しない --> 24 <{if $goodslist[key].zaiko_flag && $goodslist[key].zaikosu <= 0}> 25 *没有库存 26 <{else}> 27 订购数量:<input type="text" name="kosu" size="4" value="<{$goodslist[key].min_kosu}>"><{$goodslist[key].tani}> 28 <input type="submit" value="装进购物车"> 29 <{/if}> 30 <!--// 在庫がない時はカートボタンを表示しない --> 31 </form> 32 </div> 33 <!--// カートボタンフォーム --> 34 </td> 35 </tr></table> 36 </div> 37 <!--// 1商品ずつの定義 --> 38 <{/section}>

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

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

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

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

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

Lhankor_Mhy

2021/02/01 08:18

スクリーンショットを拝見すると、td.thumbnail の幅が 302.733px となっていますが、ご提示のCSSでは width: 100px となっていますので、そのようになるのは少しおかしいと思います。 そのスクリーンショットを取った時のスクリーン幅はどうなっていましたか?
guest

回答1

0

自己解決

メディアクエリの外にある
img {
border:0px;
width: 100%;
height: auto;
}

を記述したことでサイズが大きくなりました。

投稿2021/02/01 08:48

21120903ryosuke

総合スコア7

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問