JavaScriptで作成した画像をCSSでトリミングできない

この質問は続きです。

ファイル名が連番な画像を表示する - https://teratail.com/questions/62784

このようなJavaScriptで作成した画像を正方形にトリミングしたいと考えています。

JavaScript
1for (i=1; i<=13; i++) {
2document.write('<div class="gallery-img"><a href="https://test.jp/site/test/' + i + '.jpg"><img src="https://test.jp/site/test/' + i + '.jpg"></a></p>');
3}

出力されるのはこのようなコード。

HTML
1<div class="gallery-img"><a href="https://test.jp/site/test/1.jpg"><img src="https://test.jp/site/test/1.jpg"></a></div>

画像をトリミングしたいのですが、トリミングできません。

<div>を<p>に変えることで表示はできるのですが、ここにCSSでトリミングをかけているのですが```.gallery-img img```の```width```と```height```を外さないと表示できません。作って見たCSSを載せますが、JavaScriptなど何を使ってもいいので改善方法を教えてください。 ```CSS .gallery-img { overflow: hidden; width: 100px;/* トリミングしたい枠の幅 */ height: 100px;/* トリミングしたい枠の高さ */ position: relative; display: inline-block; } .gallery-img img { position: absolute; width: auto; height: 100%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } ```

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

回答3件

このように行えるのではないでしょうか？

HTML
1<!DOCTYPE HTML>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        .gallery-image {
13            bottom: 5px;
14        }
15
16        .gallery-image img {
17            width: 100px;
18            height: 100px;
19            overflow: hidden;
20        }
21    </style>
22</head>
23<body>
24<script>
25    for (i = 1; i <= 13; i++) {
26        document.write(
27            '<div class="gallery-image">' +
28            '<a href="https://placehold.jp/ff4747/ffffff/200x150.png?text=' + i + '">' +
29            '<img src="https://placehold.jp/ff4747/ffffff/200x150.png?text=' + i + '">' +
30            '</a>' +
31            '</div>'
32        );
33    }
34</script>
35</body>
36</html>

追記

innerHTMLの場合はこのように行えると思います。

HTML
1<!DOCTYPE HTML>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        .gallery-image {
13            bottom: 5px;
14        }
15
16        .gallery-image img {
17            width: 100px;
18            height: 100px;
19            overflow: hidden;
20        }
21    </style>
22</head>
23<body>
24<script>
25    document.addEventListener("DOMContentLoaded", function () {
26        for (i = 1; i <= 13; i++) {
27            document.body.innerHTML +=
28                '<div class="gallery-image">' +
29                '<a href="https://placehold.jp/ff4747/ffffff/200x150.png?text=' + i + '">' +
30                '<img src="https://placehold.jp/ff4747/ffffff/200x150.png?text=' + i + '">' +
31                '</a>' +
32                '</div>';
33        }
34    }, false);
35</script>
36</body>
37</html>

insertAdjacentHTMLを使うと以下のように行えると思います。

HTML
1<!DOCTYPE HTML>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        .gallery-image {
13            bottom: 5px;
14        }
15
16        .gallery-image img {
17            width: 100px;
18            height: 100px;
19            overflow: hidden;
20        }
21    </style>
22</head>
23<body>
24<script>
25    document.addEventListener("DOMContentLoaded", function () {
26        for (i = 1; i <= 13; i++) {
27            document.body.insertAdjacentHTML('beforeend',
28                '<div class="gallery-image">' +
29                '<a href="https://placehold.jp/ff4747/ffffff/200x150.png?text=' + i + '">' +
30                '<img src="https://placehold.jp/ff4747/ffffff/200x150.png?text=' + i + '">' +
31                '</a>' +
32                '</div>');
33        }
34    }, false);
35</script>
36</body>
37</html>

投稿2017/01/20 15:59

編集2017/01/21 16:27

s8_chu

総合スコア14731

2001Y

2017/01/21 17:03

ありがとうございます。ですがそれではトリミングというよりは無理やり縦横を100pxにしたものになってしまいますので、わざわざ色々工夫しなくてもできたので、自己解決に乗せておきます。

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

JavaScript
1for (i=1; i<=13; i++) {
2document.write('<div class="gallery-img"><a href="https://test.jp/site/test/' + i + '.jpg"><img src="https://test.jp/site/test/' + i + '.jpg"></a></div>');
3}

ですね。ｗ
一番最後が</p>になっています。</div>にすると、表示を確認できました (Chrome)

投稿2017/01/20 16:08

退会済みユーザー

総合スコア0

自己解決

わざわざ面倒なことをしなくてもできました。。。
display: inline-block; は個人的な設定ですのでお気になさらず。
.gallery-image img の height: 100px; は height: 100%; でも良い木がするのですが、Safariではおかしくなるようなので。

CSS
1.gallery-image {
2    width: 100px;
3    height: 100px;
4    overflow: hidden;
5    display: inline-block;
6}
7
8.gallery-image img {
9    width: auto;
10    height: 100px;
11    overflow: hidden;
12}