0
Я не javascript dev, но мне был предоставлен некоторый код для отладки. Пожалуйста, несите меня. В принципе, в iOS-модуле, над которым я работаю, есть файл .js CSS. Изображения в настоящее время загружаются ненадлежащим образом, в результате чего требуется горизонтальная прокрутка.Создание нового разрыва строки в функции javascript, которая форматирует изображения
Вот мой код. Вы можете видеть, что стиль настроен на блокировку отображения, но это не дает желаемого результата.
function resizeImages(container, maxWidth) {
var images = container.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
var img = images[i];
var width = parseInt(window.getComputedStyle(img, null).getPropertyValue('width'));
var height = parseInt(window.getComputedStyle(img, null).getPropertyValue('height'));
if (width > maxWidth) {
var ratio = maxWidth/width;
img.style.width = (maxWidth - 30) + "px";
// Some image heights are set to 'auto' so they do not need their height set
if (height != 0) {
img.style.height = parseInt(height * ratio) + "px";
}
}
img.style.display = "block";
img.style.marginLeft = "auto";
img.style.marginRight = "auto";
}
}
Возможно ли установить макет в этой функции, или мне нужно будет найти другой способ?
Спасибо за любую помощь
EDIT ************* распечатал HTML, который был возвращен на вызов, и добавил, что я мог бы здесь
<link rel="stylesheet" href="/7.0.2.0/styles/jive-base.css" type="text/css" media="all"/>
<link rel="stylesheet" href="/7.0.2.0/styles/jive.css" type="text/css" media="all"/>
<link rel="stylesheet" href="/7.0.2.0/styles/jive-content.css" type="text/css" media="all" />
<style>
/* Improve default page styles for mobile */
body { background-color: #FFFFFF; min-width: 100px; padding-top: 20px; padding-left: 10px; padding-right: 10px;}
p {width: 98%; }
div.jive-rendered-content { width: 98%; }
.jive-rendered-content img.jive-image { margin: 5px; }
/* Remove link icons from inline links */
.jive-link-profile-small, .jive-link-socialgroup-small, .jive-link-community-small, .jive-link-blog-small, .jive-link-video-small, .jive-link-external-small:after, .jive-link-external-small, .jive-link-wiki-small { background-image: none; }
/* Remove underline from links after they're activated */
a:hover, a:active, a:focus { text-decoration: none; }
/* Hide unsupported Flash video content */
.jive-video-view, .jive-content-video { display: none; }
</style>
HTML Я знаю, что это некрасиво, но я пытался его очистить, оставив мясо. Мои извинения.
<body><link rel="stylesheet" href="/7.0.2.0/styles/jive-base.css" type="text/css" media="all"/>
<link rel="stylesheet" href="/7.0.2.0/styles/jive.css" type="text/css" media="all"/>
<link rel="stylesheet" href="/7.0.2.0/styles/jive-content.css" type="text/css" media="all" />
<style>
/* Improve default page styles for mobile */
body { background-color: #FFFFFF; min-width: 100px; padding-top: 20px; padding-left: 10px; padding-right: 10px;}
p {width: 98%; }
div.jive-rendered-content { width: 98%; }
.jive-rendered-content img.jive-image { margin: 5px; }
/* Remove link icons from inline links */
.jive-link-profile-small, .jive-link-socialgroup-small, .jive-link-community-small, .jive-link-blog-small, .jive-link-video-small, .jive-link-external-small:after, .jive-link-external-small, .jive-link-wiki-small { background-image: none; }
/* Remove underline from links after they're activated */
a:hover, a:active, a:focus { text-decoration: none; }
/* Hide unsupported Flash video content */
.jive-video-view, .jive-content-video { display: none; }
</style><!-- [DocumentBodyStart:e313f4cb-be82-4ce9-9325-7ec5d2d25b49] --><div class="jive-rendered-content"><p><p style="min-height: 8pt; padding: 0px;"> </p><table border="0px" class="jiveBorder" jive-data-cell="{"color":"#3D3D3D","textAlign":"center","padding":"2","backgroundColor":"transparent","fontFamily":"Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif","verticalAlign":"baseline"}" jive-data-header="{"color":"#505050","backgroundColor":"#F2F2F2","textAlign":"left","padding":"6"}" style="border: 0px solid #c6c6c6; width: 100%;"><tbody><tr><td style="border:0pxpx solid black;border: 0px solid #c6c6c6;padding: 2px;vertical-align: top;text-align: center;"><a href="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/showImage/38-91630-522497/13672161_10157144798120367_1344748601_n.jpg"><img alt="13672161_10157144798120367_1344748601_n.jpg" class="image-1 jive-image" height="206" src="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/downloadImage/38-91630-522497/13672161_10157144798120367_1344748601_n.jpg" style="height: auto;" width="275"/></a></td><td style="border:0pxpx solid black;border: 0px solid #c6c6c6;padding: 2px;vertical-align: top;text-align: center;"><a href="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/showImage/38-91630-522498/13689395_10157144799275367_1573986411_n.jpg"><img alt="13689395_10157144799275367_1573986411_n.jpg" class="image-2 jive-image" height="206" src="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/downloadImage/38-91630-522498/13689395_10157144799275367_1573986411_n.jpg" style="height: auto;" width="275"/></a></td><td style="border:0pxpx solid black;border: 0px solid #c6c6c6;padding: 2px;vertical-align: top;text-align: center;"><a href="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/showImage/38-91630-522499/13706333_10157144800985367_1742170785_n.jpg"><img alt="13706333_10157144800985367_1742170785_n.jpg" class="image-3 jive-image" height="206" src="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/downloadImage/38-91630-522499/13706333_10157144800985367_1742170785_n.jpg" style="height: auto;" width="275"/></a></td></tr></tbody></table><p style="min-height: 8pt; padding: 0px;"> </p><table border="0px" class="jiveBorder" jive-data-cell="{"color":"#3D3D3D","textAlign":"center","padding":"2","backgroundColor":"transparent","fontFamily":"Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif","verticalAlign":"baseline"}" jive-data-header="{"color":"#505050","backgroundColor":"#F2F2F2","textAlign":"left","padding":"6"}" style="border: 0px solid #c6c6c6; width: 100%;"><tbody><tr><td style="border:0pxpx solid black;border: 0px solid #c6c6c6;padding: 2px;vertical-align: baseline;text-align: center;"><a href="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/showImage/38-91630-522500/13705113_10157144798165367_204528607_n.jpg"><img alt="13705113_10157144798165367_204528607_n.jpg" class="image-4 jive-image" height="206" src="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/downloadImage/38-91630-522500/13705113_10157144798165367_204528607_n.jpg" style="height: auto;" width="275"/></a></td><td style="border:0pxpx solid black;border: 0px solid #c6c6c6;padding: 2px;vertical-align: baseline;text-align: center;"><a href="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/showImage/38-91630-522501/13714428_10157148347660367_1956053232_n.jpg"><img alt="13714428_10157148347660367_1956053232_n.jpg" class="image-5 jive-image" height="206" src="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/downloadImage/38-91630-522501/13714428_10157148347660367_1956053232_n.jpg" style="height: auto;" width="275"/></a></td><td style="border:0pxpx solid black;border: 0px solid #c6c6c6;padding: 2px;vertical-align: baseline;text-align: center;"><a href="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/showImage/38-91630-522502/13689832_10157144798095367_1657929227_n.jpg"><img alt="13689832_10157144798095367_1657929227_n.jpg" class="image-6 jive-image" height="206" src="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/downloadImage/38-91630-522502/13689832_10157144798095367_1657929227_n.jpg" style="height: auto;" width="275"/></a></td></tr></tbody></table><p style="min-height: 8pt; padding: 0px;"> </p><table border="0px" class="jiveBorder" jive-data-cell="{"color":"#3D3D3D","textAlign":"center","padding":"2","backgroundColor":"transparent","fontFamily":"Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif","verticalAlign":"baseline"}" jive-data-header="{"color":"#505050","backgroundColor":"#F2F2F2","textAlign":"left","padding":"6"}" style="border: 0px solid #c6c6c6; width: 100%;"><tbody><tr><td style="border:0pxpx solid black;border: 0px solid #c6c6c6;padding: 2px;vertical-align: baseline;text-align: center;"><a href="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/showImage/38-91630-522503/13689795_10157148347775367_1926959939_n.jpg"><img alt="13689795_10157148347775367_1926959939_n.jpg" class="image-7 jive-image" height="400" src="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/downloadImage/38-91630-522503/13689795_10157148347775367_1926959939_n.jpg" style="height: auto;" width="300"/></a></td><td style="border:0pxpx solid black;border: 0px solid #c6c6c6;padding: 2px;vertical-align: baseline;text-align: center;"><a href="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/showImage/38-91630-522504/13713516_10157148347865367_1911484589_n.jpg"><img alt="13713516_10157148347865367_1911484589_n.jpg" class="image-8 jive-image" height="400" src="https://ppppp.ddd.xxxxxxxxxxx.com/servlet/JiveServlet/downloadImage/38-91630-522504/13713516_10157148347865367_1911484589_n.jpg" style="height: auto;" width="300"/></a></td></tr></tbody></table></div><!-- [DocumentBodyEnd:e313f4cb-be82-4ce9-9325-7ec5d2d25b49] --><script type="text/javascript">
function formatBlogContent() {
var container = document.querySelector('body');
var maxWidth = document.body.clientWidth - 30;
// Size images to screen
resizeImages(container, maxWidth);
// Remove left/right padding
var items = container.getElementsByTagName("*");
for (var i = 0; i < items.length; i++) {
var item = items[i];
// Set the font size
item.style.fontSize = "11pt";
// Remove indentation
var paddingLeftString = window.getComputedStyle(item, null).getPropertyValue('padding-left');
var paddingLeftInt = parseInt(paddingLeftString);
var paddingRightString = window.getComputedStyle(item, null).getPropertyValue('padding-right');
var paddingRightInt = parseInt(paddingRightString);
if (paddingLeftInt > 0 || paddingRightInt > 0) {
item.style.paddingLeft = "0px";
item.style.paddingRight = "0px";
item.style.width = maxWidth - 50 + "px";
item.style.marginLeft = "auto";
item.style.marginRight = "auto";
// Resize adjusted block level images
resizeImages(item, (maxWidth - 65));
}
}
// Remove tables that are larger than the content space
var tables = container.getElementsByTagName('table');
for (var i = 0; i < tables.length; i++) {
var table = tables[i];
var tableWidth = window.getComputedStyle(item, null).getPropertyValue('width');
// alert("width: " + tableWidth)
if (tableWidth > maxWidth) {
table.style.display = "none";
} else {
table.width = "98%"
}
}
// Adjust Links
updateLinks(container)
}
function resizeImages(container, maxWidth) {
var images = container.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
var img = images[i];
var width = parseInt(window.getComputedStyle(img, null).getPropertyValue('width'));
var height = parseInt(window.getComputedStyle(img, null).getPropertyValue('height'));
if (width > maxWidth) {
var ratio = maxWidth/width;
img.style.width = (maxWidth - 30) + "px";
// Some image heights are set to 'auto' so they do not need their height set
if (height != 0) {
img.style.height = parseInt(height * ratio) + "px";
}
}
img.style.display = "block";
img.style.marginLeft = "auto";
img.style.marginRight = "auto";
}
}
function updateLinks(container) {
var links = container.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
var link = links[i];
var url = link.href
// Test for link to profiles
var peopleLinks = url.search(/\/people\//i);
if (peopleLinks > 0) {
// Move to next profile, leaving link active
continue;
}
// Test for link to a blog
var blogLinks = url.search(/\/blogs\//i);
if (blogLinks > 0) {
// Replace URL with AWB URL
var awbURL = url.replace("https:","awbs:");
link.href = awbURL;
continue;
}
// Disable link
link.href = "javascript:void(0)";
// Set the text color to the same as the parent element so that user can't tell there's a link
var parent = link.parentElement;
link.style.color = window.getComputedStyle(parent, null).getPropertyValue('color');
}
}
// Kick off the formating process after the page load
formatBlogContent();
</script></body>
Нам, вероятно, потребуется больше, чтобы ответить на этот вопрос. Может оказаться полезным скрипка с соответствующими HTML и CSS. И, как замечание, «30» кажется довольно произвольным, особенно в отношении высоты, рассчитываемой по «коэффициенту». –
Просто установите 'max-width: 100%' в CSS – TricksfortheWeb
Удерживая max-width мою работу, но если 'display: block' не работает, то у вас, вероятно, есть куча элементов обертки в вашем HTML, хочу очистить. Как выглядит получившийся HTML? – dlsso