微信朋友圈圖片等比例縮放代碼
1. html圖片如何按屏幕大小等比例縮放
html圖片按屏幕大小等比例縮放若瀏覽器允許可按Ctrl+滑鼠滾輪滑動縮放,或用代碼。
2. 求微信朋友圈圖片的壓縮演算法,謝謝。
很難
3. 微信朋友圈圖片被自動變小變正方形,怎麼
你微信朋友圈的圖片被自動變小變大方,什麼是你手機裡面的設置要求這樣的只要改動設置就可以恢復原來的模式。
4. css讓圖片按最大長或寬等比例縮放
有幾個方法,各有優劣 你自己斟酌,部分也說不細需要你自己網路具體做法:
定死寬高中的一個,另一個未定死的數值就會按比例來,如果多了overflow切掉,好處是容易操作,兼容性好,壞處很多,圖片內容不能全部展示、可能切掉希望展示的內容只適用於很少情況。
設為背景圖使用css3的background-size配合background-position來解決,contain和cover兩個值效果不錯,基本能解決你想要的所有效果,缺點是不兼容低版本瀏覽器、需要通過內聯css樣式解決、不是img標簽瀏覽器搜索引擎不友好、不符合HTML語義化標准。
使用css3的flex定位,網上有具體的操作,一時說不明白都是用得到的時候自己去搜。好處是完全語義化符合標准,基本能解決你的問題,缺點是,學習成本高,兼容性稍差,有些手機上表現有問題。
js方案,都js了自己寫就是了。缺點是需要用js,寫不好會有bug,相對麻煩一些,載入時候頁面可能會有抖動。
伺服器方案,客戶上傳的圖片到伺服器走一圈,做成自己希望的大小,而且有一個伺服器插件不僅可以截取到目的大小而且還能針對圖片內容截取(例如盡可能保留人物面部、智能判斷頁面重點),這個試過效果很不錯,不過具體哪個插件不記得了,估計搜也能搜到。優點是比較智能自己設置好了幾乎完美,幾乎不再需要麻煩的css,頁面也相對比較規整,缺點是需要伺服器端支持。
如果可以比拘泥於容器,讓容器兼容圖片,網上有很多的gallery插件,類似谷歌圖片,擺布也不錯,優點是不用考錄圖片和div的問題了,缺點是需要從新設計及相關技術....
5. 如何將圖片等比例縮小
利用電腦系統自帶的畫圖軟體可以將圖片等比例縮小。
1、用滑鼠選中要縮小尺寸的圖片,然後右擊滑鼠。在出現的菜單中打開方式選擇電腦自帶的畫圖軟體。
6. 求asp圖片等比例縮放代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>圖片垂直居中,自動縮略圖</title>
<meta name="author" content="calent,[email protected]" />
</head>
<style type="text/css">
<!--
*{padding:0; margin:0}
body{font-size:12px; text-align:center; font-family:arial,sans-serif}
#wrap{width:800px; margin:20px auto; text-align:left}
#wrap ul{list-style:none}
#wrap li,#wrap .pic{width:130px; height:100px}
#wrap li{margin:8px; float:left; display:inline; overflow:hidden; border:1px solid #000}
.pic{text-align:center; display:table-cell; vertical-align:middle;border:1px solid #ccc; font-size:88px}
.pic img{vertical-align:middle}
#{clear:both; padding:5px}
-->
</style>
<script type="text/javascript">
<!--
/*
功能:圖片等比例縮放
目標:ImgTag
圖片寬度:FitWidth
圖片高度:FitHeight
*/
var FitWidth = 130;
var FitHeight = 110;
function ResizePic(ImgTag)
{
var image = new Image();
image.src = ImgTag.src;
if(image.width>0 && image.height>0){
if(image.width/image.height >= FitWidth/FitHeight){
if(image.width > FitWidth){
ImgTag.width = FitWidth;
ImgTag.height = (image.height*FitWidth)/image.width;
}
else{
ImgTag.width = image.width;
ImgTag.height = image.height;
}
}
else{
if(image.height > FitHeight){
ImgTag.height = FitHeight;
ImgTag.width = (image.width*FitHeight)/image.height;
}
else{
ImgTag.width = image.width;
ImgTag.height = image.height;
}
}
}
}
//-->
</script>
<body>
<div id="wrap">
<ul>
<li><div class="pic"><img src="img/pic1.jpg" width="13px" height="10px" onload="javascript:ResizePic(this)" /></div></li>
<li><div class="pic"><img src="img/pic2.jpg" width="13px" height="10px" onload="javascript:ResizePic(this)" /></div></li>
<li><div class="pic"><img src="img/pic3.jpg" width="13px" height="10px" onload="javascript:ResizePic(this)" /></div></li>
<li><div class="pic"><img src="img/pic4.jpg" width="13px" height="10px" onload="javascript:ResizePic(this)" /></div></li>
<li><div class="pic"><img src="img/pic5.jpg" width="13px" height="10px" onload="javascript:ResizePic(this)" /></div></li>
<li><div class="pic"><img src="img/pic6.jpg" width="13px" height="10px" onload="javascript:ResizePic(this)" /></div></li>
<li><div class="pic"><img src="img/pic7.jpg" width="13px" height="10px" onload="javascript:ResizePic(this)" /></div></li>
<li><div class="pic"><img src="img/pic8.jpg" width="13px" height="10px" onload="javascript:ResizePic(this)" /></div></li>
</ul>
<div id="">&; 2008 Design by calent</div>
</div>
</body>
</html>
7. 圖片的等比例縮放
<img border="0" src="****.jpg" width="80">
這樣,你的圖片寬度就是80了,高度也是根據比例自動縮放了!
8. 微信朋友圈發的照片,怎樣保持原尺寸
微信的封面圖是不管你傳多小的圖片,都會被自動擴大為480*300左右,所以,你在找到合適的圖片內容的話,最好是保持480*300左右的尺寸上傳就行了。
屏幕解析度的不同(或者更加可能是屏幕長寬比的不同),每個人的相冊封面照片顯示情況是不一樣的。想在不同的設備上顯示一模一樣的效果是不可能的,但是在單一一台設備上完美顯示某張照片,還是可以的。
使用正方形的圖片作為相冊封面的話,左右兩邊(一部分)是正確顯示的,不會出現被裁掉一部分的現象。但是微信還是會將你的圖片的上面一部分和下面一部分裁掉,顯示不出來。
想要顯示的圖片放在正方形的中部,讓其顯示完整。在第一次用PS嘗試之後,發現上面和下面被裁掉部分的面積是一樣的,也就是說,只要我知道封面顯示的范圍,我就能夠讓圖片完整地顯示出來。然後在我不斷地用二分法試驗之後發現,在設備的解析度的是1920*1080及其1280*720這些一樣的長寬比情況下,被裁掉的部分的高各占整高的12.3%,可以微調到12.4%或以上。整張圖片(捨去原圖左邊部分)就完整顯示出來了。
只要你將圖片放入上述的「完整顯示區域」,圖片就能夠完整顯示出來。不同的設備被裁掉的部分面積不同,需要自己試出裁掉的百分比是多少。一般來說,5寸的屏幕,裁掉的部分是12.3%,這個尺寸的設備比較多。
9. 求CSS圖片等比例縮放代碼
載入Jquery
$(function(){
if($(".pic").width()>630)
{
$(".pic").css("width","630px");
}
});