Not Solved [How To?] Automatically resize image to fit screen?
#1
Not Solved
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: 
[Image: o6cphqJ.png]
Reply
#2
Not Solved
This user has been denied support. This user has been denied support.
(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: 
[Image: o6cphqJ.png]

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!
Reply
#3
Not Solved
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

[Image: vTcqvgp.png]
Reply
#4
Not Solved
then add there 

object-fit: cover;
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)