MyBB Community Forums

Is there a plugin that automatically resizes an image to fit on a screen? For example when embedding an image in a thread, mobile users can only see half of the picture.

Example: 

(2021-09-05, 07:45 AM)kfakes Wrote: [ -> ]Is there a plugin that automatically resizes an image to fit on a screen? For example when embedding an image in a thread, mobile users can only see half of the picture.

Example: 

In the default MyBB theme you can find following line in the postbit and postbit_classic template

<div class="post_body scaleimages" id="pid_{$post['pid']}">

and in the postbit_classic template additionaly the line

<div class="post_author scaleimages">

You would have to adapt your themes accordingly unless they do not show the scaleimages CSS class. After integrating this in your themes you would have to include following CSS class in your global.css of your themes

.scaleimages img {
	max-width: 100%;
}

and modify the value of max-width to your requirements....

No need for plugin, MyBB Core has this in place already!

my theme already has that intergrated,

postbit_classic:

{$ignore_bit}
<a name="pid{$post['pid']}" id="pid{$post['pid']}"></a>
<div class="post classic {$unapproved_shade}" style="{$post_visibility}" id="post_{$post['pid']}">
<div class="post_flexible">
<div class="post_author scaleimages">
	<center><strong><span class="largetext">{$post['profilelink']}</span></strong> {$post['onlinestatus']}</center>
	{$post['useravatar']}<br>
	<div class="author_information">
			
			<span class="smalltext">
				{$post['usertitle']}<br />
				{$post['userstars']}
				{$post['groupimage']}
			</span>
	</div>
	<div class="author_statistics">
		{$post['user_details']}
	</div>
</div>
<div class="post_content{$post['styleclass']}">
	<div class="post_head">
		{$post['posturl']}
		{$post['icon']}
		<span class="post_date"><i class="fa fa-clock-o"></i> {$post['postdate']} <span class="post_edit" id="edited_by_{$post['pid']}">{$post['editedmsg']}</span></span>
	{$post['subject_extra']}
	</div>
	<div class="post_body scaleimages" id="pid_{$post['pid']}">
		{$post['message']}
	</div>
	{$post['attachments']}
	{$post['signature']}
	<div class="post_meta" id="post_meta_{$post['pid']}">
		{$post['iplogged']}
	</div>
</div>
</div>
<div style="{$post['tyl_display']}" id="tyl_{$post['pid']}">{$post['thankyoulike_data']}</div>
<div class="post_controls">
	<div class="postbit_buttons author_buttons float_left">
		{$post['button_email']}{$post['button_pm']}{$post['button_www']}{$post['button_find']}{$post['button_rep']}
	</div>
	<div class="postbit_buttons post_management_buttons float_right">
		{$post['button_tyl']}{$post['button_edit']}{$post['button_quickdelete']}{$post['button_quickrestore']}{$post['button_quote']}{$post['button_multiquote']}{$post['button_report']}{$post['button_warn']}{$post['button_purgespammer']}{$post['button_reply_pm']}{$post['button_replyall_pm']}{$post['button_forward_pm']}{$post['button_delete_pm']}
	</div>
</div>
</div>

global.css

then add there 

object-fit: cover;