kuronekopunk https://blog.hatena.ne.jp/kuronekopunk/ ノンカフェインであなたにやさしい https://akinobu.net/ CSS HTML CSSで高さを可変にして縦横比(アスペクト比)を維持する方法です。 縦横比(アスペクト比)1:1のサイズで幅に合わせて高さを可変にしたい時などに使えます。 paddingの特性を使って実現しています。さっそく使い方から。 CSSで高さを可変にして縦横比(アスペクト比)を維持する方法 まずはhtmlから <div class="box"> <div class="box__content"> text text </div> </div> cssはこう .box { height: auto; position: relative; width: 100%; } .box::before { c… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fakinobu.net%2Fentry%2F2016%2F11%2F17%2F220541" title="CSSで高さを可変にして縦横比(アスペクト比)を維持する - ノンカフェインであなたにやさしい" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> Hatena Blog https://hatena.blog 2016-11-17 22:05:41 rich https://akinobu.net/entry/2016/11/17/220541 1.0 100%