缩放DOM元素以使其适合CSS的父元素

问题描述

对于图像和视频元素，我们可以使用: width:100％;height:auto; ，或者甚至更好: object-fit:scale-down; ，以使图像自动缩放以适合其父级.

For image and video elements, we can use: width:100%; height:auto;, or even better: object-fit:scale-down; to have the image automatically scaled to fit within it's parent.

是否有任何类似的方法(理想情况下，仅CSS)用于以相同的方式缩放DOM元素，同时保持纵横比和子元素之间的视觉关系?

Is there any similar (ideally CSS-only) method for scaling DOM elements in the same way while maintaining aspect ratio and visual relationships between child elements?

像 transform:scale(width:100％); 这样的东西作为CSS属性是很合理的.

Something like transform:scale(width:100%); would make perfect sense as CSS property.

推荐答案

我认为纯css无法实现，因为您需要在浏览器调整大小时重新计算父级与子级之间的比例(css无法这样做不是因为它不是编程语言-只是一种样式设计).

I do not think this is possible with pure css as you would need to recalculate the ratio between the parent and child when the browser resizes (css is not able to do this as it is not programming language - just a styling one).

jQuery解决方案如下:

A jQuery solution would be as follows:

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>

这篇关于缩放DOM元素以使其适合CSS的父元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！