AngularでinnerHTMLの中のイメージのサイズを修正しようとしてもできない問題が起こりました
この部分では効くのですが、やはりinnnerHTMLの中だと効かないっぽいです
|
1 2 3 |
<div class="post-image"> <img src="{{post?.post_image[0]?.image['url']}}"> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="post format-gallery"> <div class="post-content"> <h1 class="post-title">{{post?.title}}</h1> <ul class="meta"> <li class="categories" *ngFor="let tag of post?.tags">カテゴリー: <a routerLink="/blog/category/{{tag.name}}"> {{tag.name}}</a></li> <li>{{post?.created_at | date: 'yyyy-MM-dd'}}</li> </ul><!-- /.meta --> <div class="post-image"> <img src="{{post?.post_image[0]?.image['url']}}"> </div> <div class="body-image"> <p [innerHTML]="post?.body"></p> </div> </div><!-- /.post-content --> </div><!-- /.post --> |
調べてみたところ以下のようにCSS記述すると問題なく使えるようにナルトのことで、実行したところ無事にサイズが修正されました！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
:host /deep/ .post-content { img { text-align: center; width: 100%; height: auto; overflow: hidden; margin-bottom: 30px; } } .similar-image { img { width: auto; height: 200px; display: block; margin-left: auto; margin-right: auto; } } |
参考にした記事
