プロが教えるわが家の防犯対策術！

imgタグのみで画像を中央に重ねる方法

締切済

  • 質問者：Tank2005
  • 質問日時：
  • 回答数：4件

HTML5+CSS3で画像を中央にフィットした状態で重ねる方法を調べています。

一般的にはbackground-size:contain;で背景を適用したDIV要素にimg要素を挿入しますが、この場合だと一部のブラウザでは背景が印刷されないことがあります。

そのため、background-imageを使わずにこれと同じ方法を実現したいのですが、何かいい方法はありますでしょうか。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.1

<div>


<img src="1.jpg">
<img src="2.jpg">
</div>

外側のdivはposition:relative
うちがわのimgはposition:absolute;
top と　left で位置指定単位px

重ね順の指定は z-indexで
値が大きい物が上

この回答への補足

background-size:contain;のように親の要素のサイズに合わせて柔軟に伸縮する方法はありませんか。

補足日時：2014/03/07 17:02
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： nanden1548
  • 回答日時：

パララックス効果をだしたいということかな？


参照URLを見ると、理解できるのでは？・・・
わからなければ、質問ください！

参考URL：http://www.yuguri.com/2013/07/04parallaz-scrolli …
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： ORUKA1951
  • 回答日時：

CSS3を持ち出さなくてもCSS2.1の範囲内です。


　画像要素は置換インライン要素ですから本来は指定サイズ、もしくは置換される画像のサイズになります。
　⇒10.3.2 置換インライン要素の場合( http：//momdo.s35.xrea.com/web-html-test/spec/CSS21/visudet.html#inline-replaced-width )

★方法のポイント
　一方ブロック要素は直近の先祖コンテナブロックのサイズを参照できます。
　⇒10.3.3 通常フローでの非置換ブロック要素の場合( http：//momdo.s35.xrea.com/web-html-test/spec/CSS21/visudet.html#blockwidth )
　下記サンプルではaside要素がrelativeである親コンテナブロックのサイズを参照してます。
　同様にimg要素は親のrelativeなfigure要素の横サイズ参照しています。高さはautoで再指定してheight属性(詳細度0)を打ち消しています。

★なお、HTML5では、DIV要素は原則として使いません。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
NOTE:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.4 Grouping content — HTML5( http：//www.w3.org/TR/html5/grouping-content.html#the-div-element )］より

　たぶんfigure要素内のimg要素だとして・・下記のようになります。
★HTMLはHTML5で、スタイルシートはCSS2.1の範囲内で行っています。
　後方互換のためjavascript使ってます。
　個人的にはHTML5はいまだに変更がされているので時期尚早で使っていません。HTML4.01にする場合は区か盛り５の新しい要素をclass名にしたDIVに変更すること。(例:header></header>→<div class="header"></div>
　後方互換のため子供セレクタや隣接セレクタも使っていません。
　IE7以降対応、IE7も利用には問題ないはずです。
★スマホ(480px幅)～1200pxまでリキッド
★タブは＿に置換してあるので戻す。
★http：はhttp：に置換してあるので戻す。
★印刷用スタイルシートは画像を小さめにしてあるのできれいに印刷できるはずです。

<!doctype html>
<html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿<meta name="description" content="">
＿<meta name="author" content="IRUKA">
＿<!--[if IE]>
＿＿<script src="http：//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
＿＿<script src="http：//css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
＿<![endif]-->＿<link rel="stylesheet" href="css/style.css">
<style>
<!--
p{margin:0;line-height:1.8em;text-indent:1em;}
-->
</style>
<style media="screen">
<!--
html,body{margin:0;padding:0;background-color:gray;}
header,section,footer{width:80%;margin:0 auto;padding:5px;min-width:470px;max-width:1200px;background-color:white;}
section{position:relative;}
section figure{position:relative;/* staticじゃない */background-color:silver;padding:10px;margin:0 150px 0 auto;}
section figure img{display:block;border:white 10px solid;width:90%;height:auto;margin:0 auto;}
section figure figcaption{background-color:white;margin-top:0.5em;}
section h2,section p,section figure{margin-right:150px;}
section * p{margin:0;}
section aside{position:absolute;top:0;right:0;width:140px;height:100%;background-color:aqua;}
-->
</style>
<style media="print">
<!--
figure{width:70%;margin:1em auto;border:solid 1px gray;position:relative;padding:5mm}
figure img{width:90%;height:auto;margin:auto;}
aside{display:none;}
footer{page-break-before:always;}
-->
</style>
</head>
<body>
＿<header>
＿＿<h1 id="title">Your title</h1>
＿＿<nav>
＿＿＿<ul>
＿＿＿＿<li><a href="#">Some</a></li>
＿＿＿＿<li><a href="#">navigation</a></li>
＿＿＿＿<li><a href="#">links</a></li>
＿＿＿</ul>
＿＿</nav>
＿</header>
＿<section>
＿＿<h2>画像の配置の説明</h2>
＿＿<p>
＿＿＿画像は置換インライン要素なので本来はコンテナブロックのサイズに従いませんが、display:プロパティでブロック要素に変更することで、staticでない直近のコンテナブロックに合わせることができます。
＿＿</p>
＿＿<figure>
＿＿＿<img src="http：//upload.wikimedia.org/wikipedia/commons/thumb/6/66/20100724_Iwakuni_5235.jpg/1024px-20100724_Iwakuni_5235.jpg" width="640" height="425" alt="錦帯橋の写真">
＿＿＿<figcaption>
＿＿＿＿<p>
＿＿＿＿＿錦帯橋（きんたいきょう）は、山口県岩国市の錦川に架橋された木造のアーチ橋である。
＿＿＿＿</p>
＿＿＿</figcaption>
＿＿</figure>
＿＿<aside>
＿＿＿<h3>Something aside</h3>
＿＿</aside>
＿</section>
＿<footer>
＿＿<h3>A nice footer</h3>
＿</footer>
</body>
</html>
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： ORUKA1951
  • 回答日時：

間違えて説明文まで置換しててしまったので・・


　画像要素は置換インライン要素ですから本来は指定サイズ、もしくは置換される画像のサイズになります。
　⇒10.3.2 置換インライン要素の場合( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )

★方法のポイント
　一方ブロック要素は直近の先祖コンテナブロックのサイズを参照できます。
　⇒10.3.3 通常フローでの非置換ブロック要素の場合( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
　下記サンプルではaside要素がrelativeである親コンテナブロックのサイズ(heightの値)を参照してます。
　同様にimg要素は親のrelativeなfigure要素の横サイズ参照しています。高さはautoで再指定して、img要素のheight属性(詳細度0)を打ち消しています。

★なお、HTML5では、DIV要素は原則として使いません。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
NOTE:Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.4 Grouping content — HTML5( http://www.w3.org/TR/html5/grouping-content.html … )］より

　たぶんfigure要素内のimg要素だとして・・下記のようになります。
★HTMLはHTML5で、スタイルシートはCSS2.1の範囲内で行っています。
　後方互換のためjavascript使ってます。
　個人的にはHTML5はいまだに変更がされているので時期尚早で使っていません。HTML4.01にする場合はHTML5の新しい要素をclass名にしたDIVに変更すること。(例:header></header>→<div class="header"></div>
　後方互換のため子供セレクタや隣接セレクタも使っていません。
　IE7以降対応、IE7も利用には問題ないはずです。
★スマホ(480px幅)～1200pxまでリキッド
★タブは＿に置換してあるので戻す。
★http:はhttp:に置換してあるので戻す。
★印刷用スタイルシートは画像を小さめにしてあるのできれいに印刷できるはずです。
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報