縮放 HTML 圖像寬度和高度，以 % 為單位
[英]Scale HTML image width and height in %
問題描述
我知道 HTML 圖像的寬度和高度屬性可以通過<img src="Debian.jpg" style="height: 120px; width: 130px">簡單地設置。
我正在尋找的是是否存在一個 CSS 屬性，該屬性僅采用一個百分比值，並根據該%縮放原始圖像的寬度和高度。 例如，如果 Debian.jpg 的高度和寬度為Debian.jpg ，並且我在1000x700屬性中指定50% ，則圖像縮小到500x350 ，因此縱橫比得以保持。
我很難在單獨調整高度和寬度的同時保持圖像的縱橫比。 如果不存在這樣的屬性，那么有什么方法可以保持縱橫比並實現圖像的理想尺寸？
5 個解決方案
解決方案1
6 已采納 2020-05-04 08:03:00
是的，有一種方法可以保持圖像的縱橫比並將圖像調整為原始大小的一小部分。 但是，CSS 無法知道圖像的固有大小（原始大小）。 因此，您只能做兩件事：
- 明確告訴 CSS 原始尺寸
- 圖片加載時使用JS獲取原始大小
什么不起作用
使用百分比值作為img的width值並不能簡單地工作，因為百分比值解析為它的容器大小的百分比，而不是它的原始大小。 下面，我演示了不起作用的示例。
話雖如此，我個人通常想明確指定圖像的寬度。 例如，在大型設備上，我希望圖像為 1080 像素。 在較小的設備上，我希望圖像為 560 像素。 我可以簡單地為明確大小的圖像創建一個容器，將圖像放在容器內，並將圖像的寬度指定為 100%（其容器大小）。
什么有效
如前所述，有兩種方法可以使圖像達到其原始寬度的 50%。 首先，使用JS。 其次，明確告訴 CSS 原始圖像寬度。
- 使用 JS 方法，你只需要改變圖像的寬度。 加載后，獲取圖像的固有寬度，然后將新寬度設置為固有寬度除以 2。簡單。
- 顯式地使用telling-CSS-explicitly 方法不太有利。 此解決方案假定圖像始終相同，並且需要您（開發人員）事先知道原始圖像大小。 當您更改原始圖像大小時，您還需要更新您的代碼。 話雖如此，您可以通過在 CSS class 中指定一個CSS 自定義屬性來實現此目的，指定一個屬性（在 HTML 中），該屬性給出了實驗性和主要不支持的
intrinsicsize，或使用attr（）並通過 CSS 設置width和style（仍然是實驗性的，不支持）。 如前所述，最后兩種解決方案不受大多數瀏覽器的支持，可能還無法正常工作。
在我看來，將圖像的寬度設置為其固有寬度的 50% 的最佳選擇是使用 JS。 這是一個演示無效解決方案和 JS 解決方案的解決方案。 如果您只更改圖像的其中一個尺寸（寬度/高度），則會自動保持縱橫比。
const imageJS = document.querySelector('.image--changed-with-js') imageJS.onload = () => { const intrinsicWidth = imageJS.width imageJS.width = imageJS.width / 2 }
* { box-sizing: border-box; } body, html { margin: 0px; } img { margin: 20px 0; } /* Image has its intrinsic size (ie the original image size) */.image--original { width: auto; } /* Image contained within a 500px container Image has a width of 50% of 500px = 250px */.container { width: 500px; }.image--changed-with-container { width: 50%; } /* Image is not contained within a div However, image is inside body <body> is its container It now has a width of 50% of the body NOT 50% of its intrinsic width */.image--changed-without-container { width: 50%; } /* Image changed using JS You can get the intrinsic size through JS and modify its size there */.image--changed-with-js {}
<img class="image--original" src="https://img.freepik.com/free-vector/abstract-galaxy-background_1199-247.jpg?size=626&ext=jpg"> <div class="container"> <img class="image--changed-with-container" src="https://img.freepik.com/free-vector/abstract-galaxy-background_1199-247.jpg?size=626&ext=jpg"> </div> <img class="image--changed-without-container" src="https://img.freepik.com/free-vector/abstract-galaxy-background_1199-247.jpg?size=626&ext=jpg"> <img class="image--changed-with-js" src="https://img.freepik.com/free-vector/abstract-galaxy-background_1199-247.jpg?size=626&ext=jpg">
解決方案2
3 2020-05-04 05:46:00
如果將寬度設置為固定的像素數，例如img { width: 500px; } img { width: 500px; } ，高度將相應調整以保持相同的縱橫比。 如果您設置高度，寬度將相應調整以保持相同的縱橫比。
如果您將寬度設置為百分比，例如img { width: 50% } ，瀏覽器將假定您的意思是元素容器的百分比。 高度將相應調整以保持相同的縱橫比。
但是，如果您將高度設置為百分比，例如img { height: 50% } ，由於各種原因，這將不起作用。
解決方案3
2 2020-05-04 05:54:30
解決方案非常簡單。 要保持縱橫比，您需要做的就是設置高度和寬度 CSS 屬性，例如：
#theImage { width: 100%; height: auto; }
<img id="theImage" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">
通過將 width 屬性設置為 100%，您是在告訴圖像占用所有可用的水平空間。 將 height 屬性設置為 auto 時，圖像的高度會隨寬度成比例變化，以確保保持縱橫比。 最終結果是完美放大或縮小的圖像。
此解決方案的缺點是單個圖像無法在可以查看您的內容的分辨率范圍內有效地顯示。 要獲得更全面的解決方案，您需要在適當的時候引入不同大小的媒體查詢和圖像來替換較低分辨率的圖像
解決方案4
2 2020-05-04 07:52:54
我的建議是刪除您放置的指定尺寸。 是的，可以在 css 中指定一個代碼。 在 html 中這樣做：
<img src="Debian.jpg" alt="Debian Image" class="myCustomImages">
在 css 做這樣的事情：
.myCustomImages {
max-width: 50%;
max-height: 50%;
}
解決方案5
1 2020-06-13 13:44:29
據我了解，您希望保持圖像縱橫比，同時以原始大小的百分比定義它的比例。 以下是我的建議：
當圖像在帶有display: inline-block的容器內時，您可以在 css 中定義圖像的寬度，並且它將相對於自身（如果父級有display: block它將相對於它的父級，如果它是display:inline它將相對於最近的塊父級）。
當您定義一個尺寸（ width或height ）而不是另一個時，默認情況下它保持縱橫比。
所以我建議做的是將圖像包裝在一個inline-block父級中，並僅以百分比定義寬度。 像這樣：
div { display: inline-block; } #half { width: 50%; } #original { width: 100%; } #big { width: 150%; }
<h1>Image 400X267</h1> <h3>50% size</h3> <div> <img id="half" src="https://bloximages.newyork1.vip.townnews.com/unionleader.com/content/tncms/assets/v3/editorial/f/f4/ff44150d-01ca-5e2d-8f7d-9d17e9faadd4/5dfa95339e09c.image.jpg?resize=400%2C267"/> </div> <h3>100% size</h3> <div> <img id="original" src="https://bloximages.newyork1.vip.townnews.com/unionleader.com/content/tncms/assets/v3/editorial/f/f4/ff44150d-01ca-5e2d-8f7d-9d17e9faadd4/5dfa95339e09c.image.jpg?resize=400%2C267"/> </div> <h3>150% size</h3> <div> <img id="big" src="https://bloximages.newyork1.vip.townnews.com/unionleader.com/content/tncms/assets/v3/editorial/f/f4/ff44150d-01ca-5e2d-8f7d-9d17e9faadd4/5dfa95339e09c.image.jpg?resize=400%2C267"/> </div>
確定圖像的高度和寬度，以便按比例縮放其他元素？
[英]Determining image height & width in order to scale and size other elements in proportion?
使用image標簽中的width和height值的自適應HTML圖像
[英]responsive HTML images using width and height values in image tag
在畫布HTML5中查找上傳的寬度和高度的圖像。（使用文件閱讀器）
[英]Find width and height uploaded image in canvas HTML5.(With file reader)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.