Question

有没有机会保持DIV的纵横比与最大高度选项？

有一种保持宽高比的解决方案：

Dir.glob('my/directory/*.zip') { |filename|
    Zip::File.open(filename) { |zip_file|
        zip_file.each { |f|
            f_path=File.join("fil_download", f.name)
            FileUtils.mkdir_p(File.dirname(f_path))
            zip_file.extract(f, f_path) unless File.exist?(f_path)
        }
    }
}

它是完美的，但是如果想让DIV重新调整大小但达到一定的高度呢？让我们说，一旦它的高度达到200px，我希望DIV停止重新调整大小。有任何想法吗？谢谢你。

Answer 1

因为您保持恒定的宽高比，只需确定元素的宽度在所需的最大高度，然后设置max-width属性。

在这种情况下，要阻止div在200像素高时调整大小，您需要设置max-width: 266.666px。

.stretchy-wrapper {
  position: relative;
  width: 100%;
  max-width: 266.666px;
}
.ratio {
  position: relative;
  width: 100%;
  padding-bottom: 75%;
  background: gold;
}

<div class='stretchy-wrapper'>
  <div class='ratio'>
  </div>
</div>

使用CSS保持div的宽高比

1 个答案: