html圖片怎麼等比例縮放？ html img圖片縮放方法總結(附實例)-html教學-PHP中文網

首頁

web前端

html教學

html圖片怎麼等比例縮放？ html img圖片縮放方法總結(附實例)

寻∝梦

Sep 01, 2018 pm 04:12 PM

htmlimg

本篇文章主要的介紹了關於html img標籤圖片的等比例縮放的介紹和使用實例，最後還有關於html img標籤圖片等比例縮放的總結，接下來讓我們一起來看這篇文章吧

首先我們先看看html img圖片如何等比例縮放：

#在DIV CSS佈局中對於圖片清單或圖片排版時，圖片不是固定寬度高度大小，但圖片佔位是固定寬度高度，這個時候如果使用CSS固定死圖片大小（寬度高度），這個時候如果圖片相對於這個位置不是等比例大小，那麼這張圖片就會變形，讓圖片變的不清晰，這個時候想讓圖片不變形又按比例縮放，如何解決？ CSS圖片縮小不變形，圖片自動縮小，圖片以比例等比例縮小不變形解決。

html img標籤圖片縮放的解決方法有兩種：

一、讓圖片和佈局寬度高度成等比例，這樣CSS設定死寬度和高度，圖片也是等比例縮小，圖片也不會變形。

例如淘寶，要求店鋪主上傳產品封面圖片是正方形的，為什麼，因為圖片寶貝展示列表都是正方形的排版佈局，這樣要求上傳合適正方形寶貝封面圖片，也是讓圖片不變形。

所以有條件的情況下，大家將首頁、圖片清單頁的佈局寬度高度保持一致，上傳圖片時候將圖片先進行處理為佈局寬度高度時等比例放大尺寸的。

二、使用CSS max-width和max-height實現圖片自動等比例縮小

很簡單我們要使用到max-width和max-height,這樣即可設定物件圖片最大寬度和最大高度，這樣圖片就會等比例縮放圖片，然圖相對不變形清晰。

以下DIVCSS5透過實例比較方法讓大家掌握CSS控制圖片縮小不變形技巧。

接下來看關於html img圖片縮放的案例：

這裡有個DIV盒子（DIV class命名為"tupian"）CSS寬度和CSS高度方便為300px和100px同時設定1px黑色邊框，裡面放了一張圖片（圖片原始寬度650px為高度為406px）。並透過CSS固定死圖片寬度高度。

關於html img標籤圖片縮放的全部程式碼：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>图片缩小不变形实例 www.php.cn</title> 
<style> 
.tupian{ border:1px solid #000; width:300px; height:100px} 
.tupian img{width:300px; height:100px} 
</style> 
</head> 
 <body> 
<div class="tupian"> 
<img  src="/static/imghwm/default1.png"  data-src="img.jpg"  class="lazy"   / alt="html圖片怎麼等比例縮放？ html img圖片縮放方法總結(附實例)" > 
</div> 
</body> 
</html>

程式碼因為沒放圖片就不顯示效果了，可以自行腦補去。

透過CSS固定物件內圖片高度寬度，這樣圖片如果不是等比例縮小，那麼圖片就變形了。

前面說的都差不多，現在來開始總結：

CSS DIV圖片縮小不變形總結：最好解決方法就是從設計圖片本身出發，將圖片設計成與佈局中寬度高度成等比例圖片，例如你佈局時候圖片寬度為300px，高度為200px,那你設計圖片素材時候提交添加的圖片寬度高度本身可以為600px寬，400px高，或900px寬600px高,這樣等比例的圖片才能確保真正圖片縮小後不變形，顯示完整。

【小編推薦】

html font標籤如何設定字體大小？ html font標籤屬性用法介紹

HTML中新增圖片的程式碼是什麼？ html如何正確的新增圖片路徑？

以上是html圖片怎麼等比例縮放？ html img圖片縮放方法總結(附實例)的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn