画像の表示を縮小(リサイズ)したいのですが

kintone カスタマイズ
1

スペースのフィールドに画像を表示させたのですが、元の画像がスペースよりも大きいとスペースの枠にスクロールバーが表示されます。

表示の際にスペースの枠に自動的に合わせて画像を表示できるようにしたいのですが、教えてください。

 現在設定しているjavascriptは以下となっております。

(function () {
“use strict”;

function displayscratch5(event) {

var record = event[‘record’];

if (record[‘url5’][‘value’] === undefined){return;}
if (record[‘url5’][‘value’].length == 0){return;}

var scratch5_image_Url = record[‘url5’][‘value’];
scratch5_image_Url = scratch5_image_Url.replace(‘http://’,‘https://’);
scratch5_image_Url = scratch5_image_Url.replace(‘watch?v=’,‘embed/’);

var elscratch5 = document.createElement(‘div’);
elscratch5.setAttribute(‘id’, ‘dsp_scratch5’);
elscratch5.setAttribute(‘name’, ‘dsp_scratch5’);

var elIframe = document.createElement(‘iframe’);
elIframe.setAttribute(‘src’, scratch5_image_Url);
elIframe.setAttribute(‘style’, ‘width: 550px; height: 555px’);
elIframe.setAttribute(‘frameborder’, ‘0’);
elscratch5.appendChild(elIframe);

var el = kintone.app.record.getSpaceElement(‘scratch5’);
el.appendChild(elscratch5);

var elParent = el.parentNode;
elParent.setAttribute(‘style’, ‘width: 550px; height: 555px’);
}

kintone.events.on(‘app.record.detail.show’, displayscratch5);
})();

 

2

ススム様

お世話になっております。
cstapの江田です。

以下のようなコードで実装できるかと思います。

(function () {
"use strict";
function displayscratch5(event) {

var record = event['record'];

if (record['url5']['value'] === undefined){return;}
if (record['url5']['value'].length == 0){return;}

var scratch5_image_Url = record['url5']['value'];
scratch5_image_Url = scratch5_image_Url.replace('http://','https://');
scratch5_image_Url = scratch5_image_Url.replace('watch?v=','embed/');

var elscratch5 = document.createElement('div');
elscratch5.setAttribute('id', 'dsp_scratch5');
elscratch5.setAttribute('name', 'dsp_scratch5');

var img = new Image();
img.src = scratch5_image_Url;
img.onload = function(){
var imgWidth = img.width;
var imgHeight = img.height;
var width = 550; //表示したい幅(px)
var height = 555; //表示したい高さ(px)
var rWidth = width / imgWidth;
var rheight = height / imgHeight;
var r = rWidth < rheight ? rWidth : rheight;

var elIframe = document.createElement('iframe');
elIframe.setAttribute('src', scratch5_image_Url);
elIframe.setAttribute('style', 'width: ' + imgWidth + 'px; height: ' + imgHeight + 'px; -webkit-transform: scale(' + r + '); -webkit-transform-origin:0 0; transform: scale(' + r + '); transform-origin:0 0;');
elIframe.setAttribute('frameborder', '0');
elscratch5.appendChild(elIframe);

var el = kintone.app.record.getSpaceElement('scratch5');
el.appendChild(elscratch5);

var elParent = el.parentNode;
elParent.setAttribute('style', 'width: ' + width + 'px; height: ' + height + 'px; overflow: hidden;');
};

}
kintone.events.on('app.record.detail.show', displayscratch5);
})();
3

江田さま

 

無事、イメージ通りの表示ができました。

ご教示頂きまして、ありがとうございました。