kikiki-kiki https://blog.hatena.ne.jp/kikiki-kiki/ かもメモ https://chaika.hatenablog.com/ HTML CSS Responsive Design スマートフォン版のサイトなどを作る際に、例えば商品のサムネイル画像等をウィンドウ幅に合わせ、かつ中の画像を中央に表示させたいようなケースに結構遭遇します。 レスポンシブの正方形を作る vmin という単位を利用する方法 調べていると、widthとheightにvminという単位を使って、レスポンシブの正方形を作る方法がありました。 HTML <div class="squareBox"> <div class="content"></div> </div> CSS .squareBox /* margin 30px */ width: calc(100vmin - 60px) height: … 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fchaika.hatenablog.com%2Fentry%2F2016%2F07%2F15%2F163004" title="HTML・CSS レスポンシブな正方形を作って、その中央にコンテンツを表示させたい。 - かもメモ" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/k/kikiki-kiki/20160715/20160715162810.png Hatena Blog https://hatena.blog 2016-07-15 16:30:04 rich https://chaika.hatenablog.com/entry/2016/07/15/163004 1.0 100%