手机站网站通过编辑上传图片后自动强制适应宽度防止溢出

在通过某些编辑器上传图片时,会给图片自动加上宽高,或上传特别大的图片时,在手机端浏览就会超出内容框。解决办法是

1、在内容 div 里标号 id=”editor”,再加上现在的一段 js 代码即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
var resizeContentID = "editor";
var maxWidth = $("#editor").width();
var images = document
.getElementById(resizeContentID)
.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
resizepic(images[i]);
}
function resizepic(thispic) {
thispic.onload = function () {
if (thispic.width > maxWidth) {
thispic.style.height =
(thispic.height * maxWidth) / thispic.width + "px";
thispic.style.width = maxWidth + "px";
}
};
}
</script>

2、使用类名(”editor_detail_resize”)配合纯 jquery 代码来解决

1
2
3
4
5
6
7
8
<script>
$(".editor_detail_resize img").each(function () {
$(this).removeAttr("width");
$(this).removeAttr("height");
$(this).css("width", "100%");
$(this).css("height", "100%");
});
</script>