htmlのimgに合わせたボタンの配置

実現したいこと

htmlにて画像とボタンを表示します。
画像は常に全体が確認できるよう高さを調整します。
画像の高さに合わせてアスペクト比を保持して横幅を調整します。
画像のサイズは様々です。
画像を画面の中央に表示します。
ボタンは画像の上側に表示します。 ←追記
そのボタンの左端を画像の左端に合わせます。
表示したときだけではなく画面のサイズを変更したときもその条件に合うようにサイズが調整されます。

基準となる画像

縦サイズが小さくなった場合

横が小さくなった

やれたこと

html
1<body>
2	<div id="d_main">
3		<div id="d_waku" class="text-center">
4			<img src="test.png" />
5		</div>
6	</div>
7</body>
8

css
1html, body, #d_main {
2	height: 100%;
3	width: calc(100% - 20px);
4}
5#d_waku {
6	height: calc(100% - 100px);
7	width: auto;
8}
9img {
10	height: 100%;
11	widht: auto;
12	padding: 10px;
13	background-color: gray;
14}

ただこの状態だと縦長画面の場合に縦に伸びてアスペクト比が維持されません。
また、ボタンの左位置はまったく対応できていません。

やってみたこと

<table>タグを使用して、１つ目の<tr>に<button>、２つ目の<tr>に<img>を配置してみましたが、サイズ制御がうまくいきませんでした。

kei344

2018/05/18 15:57

アスペクト比が事前にわかっているならボタンの左位置の固定も出来ますが、わからないならJavaScriptが必要ですよ。

kei344

2018/05/18 16:05

画像がすべて表示されていないので、アップロードのしなおしをお勧めします。

行動規範の内容に同意します

回答2件

画面縦幅を下回る高さの画像は高さが追随しないが。

HTML
1<div><button>button</button><img src="https://placehold.jp/24/cc9999/993333/1200x600.png" alt=""></div>

CSS
1div {
2  display: inline-block;
3}
4button {
5  height: 25px;
6}
7img {
8  max-width: 100vw;
9  max-height: calc(100vh - 25px);
10}
11button, img {
12  display: block;
13}
14body, html {
15  padding: 0;
16  margin: 0;
17  text-align: center;
18}
19```**動くサンプル：**[https://jsfiddle.net/v3h7atyr/](https://jsfiddle.net/v3h7atyr/)

投稿2018/05/22 16:27

kei344

総合スコア69407

object-fit: contain を使えば良いと思います。

IE と Edge v15 以下は非対応なのでそれらのブラウザも対応に含めるなら、 Polyfill 使わなければなりませんが。

css
1img {
2    height: 100%;
3    widht: 100%;
4    padding: 10px;
5    background-color: gray;
6    object-fit: contain;
7}

投稿2018/05/18 17:39

yhg

総合スコア2161

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

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

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