Web發展到現在，已經有很大的變化，特別在當前這樣的時代，我們面對的設備種類繁多。言外之意，這樣的環境之下，Web的頁面布局時常會碰到一些縮放比例的控制，特別是針對img、iframe、object、video和embed等元素的比例縮放。當然，就img元素而言，要實現縱橫比例的布局已有多種方案，而且實戰性也特別的強，并且在Responsive設計中已使用廣泛。

既然img可以實現，那其他元素iframe、video等元素也可以借鑒其中的一些實現原理。今天我們就來說說一些這方面的實現方案。

縱橫比

在具體介紹如何實現縱橫比之前，先來了解一下縱橫比相關的概念。縱橫比分為固定縱橫比和自適應縱橫比。

基于width的百分比來設置padding百分比值，把這種方式稱之為固定縱橫比。一般我們通過width的百分比來計算padding-top或padding-bottom的百分比值，其計算公式如下：

padding-top = (元素高度 / 元素寬度) * 100%

padding-bottom = (元素高度 / 元素寬度) * 100%

比如下圖：

上圖展示的是一個9 / 16的固定縱橫比例，計算出來就是56.25%。根據這個原理，我們可以在CSS處理器做相關處理：

@mixin fixed-aspect-rations($height, $width) {

padding-bottom: $height / $width * 100%;

// 或者

padding-top: $height / $width * 100%;

}

當然還可以寫一個@function。

@function aspect-ratio($height, $width) {

$aspect-ratio: $height / $width * 100%;

@return $aspect-ratio;

}

在固定縱橫比例的基礎之上，做進一步的調整。假設我們在寬屏的PC上顯示大的圖片，而在移動設備上，我們不想使用相同的縱橫比例讓圖像等元素變得太小。當然我們也不想使用完全相同的高度讓圖像變得太高。希望看到的效果是當寬度變小時，其高度也變得更小。我們就把這種方案稱為流體縱橫比例。

這種方案可以給元素設置一個高度，來減少padding-top或者padding-bottom的百分比值。假設我們的大圖尺寸是700px的寬度和267px的高度，而我們決定顯示的圖片尺

總結

以上是生活随笔為你收集整理的html图片取消纵横比,Web中如何实现纵横比的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。