CSSの親にフィットするDOM要素の縮尺

Question

イメージとビデオの要素については、width:100%; height:auto;、またはそれ以上の場合：object-fit:scale-down;を使用して、画像をその親に合わせて自動的に拡大縮小することができます。

子要素間のアスペクト比や視覚的な関係を維持しながら、同様の方法でDOM要素を拡大縮小する類似の（理想的にはCSSのみの）方法はありますか？

transform:scale(width:100%);のようなものは、CSSプロパティとして完璧なものになります。

Answer 1

ブラウザがサイズ変更されたときに親と子の比率を再計算する必要があるので、これは純粋なCSSでは可能ではないと考えています（CSSはプログラミング言語ではないのでできません）。次のように

jQueryの溶液は次のようになります

function scale() { 
 
    $('.scaled').each(function() { 
 
    var scaled = $(this), 
 
     parent = scaled.parent(), 
 
     ratio = (parent.width()/scaled.width()), 
 
     padding = scaled.height() * ratio; 
 

 
    scaled.css({ 
 
     'transform': 'scale(' + ratio + ')', 
 
     'transform-origin': 'top left' 
 
    }); 
 

 
    parent.css('padding-top', padding); // keeps the parent height in ratio to child resize 
 
    }) 
 
} 
 

 
scale(); 
 
$(window).resize(function() { 
 
    scale(); 
 
});

.test { 
 
    border: 1px solid red; 
 
    width: 30%; 
 
    position: relative; 
 
} 
 
.scaled { 
 
    /* needs to be positioned absolutey otherwise the parent takes the child original height */ 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.scaled, 
 
.not-scaled { 
 
    width: 500px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="test"> 
 
    <div class="scaled"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer feugiat quis magna in tempus. Vivamus magna metus, consequat at mollis sit amet, vulputate et eros. Phasellus ut mauris faucibus, ultrices mauris at, mollis eros. In hac habitasse platea 
 
    dictumst. Cras placerat pretium dui. Nullam quis lacinia nunc. Quisque est lectus, maximus at vehicula et, accumsan non nisi. Proin ac purus eget neque fermentum fringilla. Sed lectus mauris, pulvinar et venenatis ut, gravida quis nibh. Interdum et 
 
    malesuada fames ac ante ipsum primis in faucibus. In dapibus purus facilisis consequat aliquam. Donec mattis orci fermentum laoreet scelerisque. Aliquam pretium urna tortor, quis viverra lacus posuere eu. Maecenas posuere mauris in sapien gravida, 
 
    sed placerat purus efficitur. 
 
    </div> 
 
</div> 
 
<div class="not-scaled"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer feugiat quis magna in tempus. Vivamus magna metus, consequat at mollis sit amet, vulputate et eros. Phasellus ut mauris faucibus, ultrices mauris at, mollis eros. In hac habitasse platea 
 
    dictumst. Cras placerat pretium dui. Nullam quis lacinia nunc. Quisque est lectus, maximus at vehicula et, accumsan non nisi. Proin ac purus eget neque fermentum fringilla. Sed lectus mauris, pulvinar et venenatis ut, gravida quis nibh. Interdum et 
 
    malesuada fames ac ante ipsum primis in faucibus. In dapibus purus facilisis consequat aliquam. Donec mattis orci fermentum laoreet scelerisque. Aliquam pretium urna tortor, quis viverra lacus posuere eu. Maecenas posuere mauris in sapien gravida, sed 
 
    placerat purus efficitur. 
 
</div>