我對 html/css 很陌生。對于我正在進行的專案，我正在嘗試縮小影像，但是，當我這樣做時，影像變得非常模糊。我已經嘗試調整 png 本身的大小，它看起來稍微好一些，但仍然模糊。任何幫助將不勝感激。
<img style="display:block;float: left;
padding-right: 5px" width=140px height=150px
src="https://i.ibb.co/HHqgNZ7/Portland-Timbers-logo-svg.png">
<img style="display:block;float: left;
padding-right: 5px" width=140px height=150px
src="https://i.ibb.co/Nn6gLz6/portland-resized.png">這里左圖是原圖，右圖是調整大小的。
uj5u.com熱心網友回復：
您可以使用 css 比例轉換，讓您在不損失質量的情況下縮小影像
https://developer.mozilla.org/fr/docs/Web/CSS/transform-function/scale()
.scale {
transform: scale(0.7);
}<img style="display:block;float: left;
padding-right: 5px"
src="https://i.ibb.co/HHqgNZ7/Portland-Timbers-logo-svg.png">
<img class="scale" style="display:block;float: left;
padding-right: 5px"
src="https://i.ibb.co/HHqgNZ7/Portland-Timbers-logo-svg.png">uj5u.com熱心網友回復：
有時會發生這種情況，因為瀏覽器嘗試插入較小影像的方式。
您可以添加名為“image-rendering”的樣式或 css 屬性來更改其呈現方式。
這里有一些屬性。嘗試看看哪一個最適合您的影像。
image-rendering: pixelated;
image-rendering: high-quality;
image-rendering: auto;
image-rendering: crisp-edges;
uj5u.com熱心網友回復：
您可以css在線使用代替任何其他轉換器
- 如果您想根據高度或寬度縮小并成比例，
- 然后將值設定為
height或width， - 和其他財產
auto
注意：這里不需要設定其他屬性，auto只是為了方便理解而說的
.resizedI{
height:100px;
width:auto;
}<img style="display:block;float: left;
padding-right: 5px"
src="https://i.ibb.co/HHqgNZ7/Portland-Timbers-logo-svg.png">
<img style="display:block;float: left;
padding-right: 5px" class="resizedI"
src="https://i.ibb.co/HHqgNZ7/Portland-Timbers-logo-svg.png">uj5u.com熱心網友回復：
這個答案解釋了邏輯，而不是solution
需要考慮的事項
- 在瀏覽器或現實世界中，當影像要縮小（按比例縮小）時，一些像素肯定會丟失
- 無論影像如何渲染，都會丟失一些像素
- 影像渲染的方式只是定義影像需要丟失的像素，以及什么顏色......，無論如何像素會丟失
- 對于像電視或顯示幕這樣的 12k 或 HD 而言，情況并非如此，因為（在電視中）只有 1 厘米，它有很多像素可以決定清晰度。
- 所以最終像素會根據顯示幕/設備容量丟失，如果顯示幕是好的，像素不會丟失（可能會丟失但非常少）。
uj5u.com熱心網友回復：
縮略圖原始尺寸：
出現模糊效果是因為您嘗試使用縮略圖來調整大小。您可以使用 SVG 等矢量影像來執行此操作，但不能使用 png、jpg 等。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/435029.html
上一篇：文本位置的HTMLDIV設定