100% width for image in modal dialog

Question

I want the image in my modal dialog to be width:100%, but do not know how to do it.

I'm using this code (thank you Mohamed El-Qassas):

<script>
function openDialog(pageUrl) {
var options = {
url: pageUrl,
title: 'Image',
allowMaximize: false,
showClose: true,
width: 800,
height: 500
};
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
}
</script>
<a href="#" onclick="openDialog('http://url');"><img src="xxx.png"></a>

My 'openDialog' points to an URL and displays an image. My 'img src' is a thumbnail image.

All is working, but my image is too big for the modal size - I want the image to shrink-to-fit or to be of width:100%, no matter the real size of the image.

Answer 1

Unfortunately, there is no option to shrink to fit the inside contents in the Modal Popup dialog in SharePoint.

Instead, try to use fancy box jquery modal

---

But if you need to work with SharePoint Modal, I think the auto size width will be suitable for you!

Just remove the width option width: 800 in the code!

<script>
function openDialog(pageUrl) {
var options = {
url: pageUrl,
title: 'Image',
allowMaximize: false,
showClose: true,
height: 500
};
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
}
</script>
<a href="#" onclick="openDialog('http://url');"><img src="xxx.png"></a>

Output

Check also at open a SharePoint link via SharePoint Modal

Answer 2

Could you just add

width:100% !important;

To the img via css