文章内容页图片自动居中,自适应手机,宽度100%

心已赠人 2021-09-25 20:02 256阅读 1赞

发表文章时,需要上传图片,很多内容编辑器对图片的处理是居左显示的吧.另外,如果是响应式的html5网站,还存在一个图片宽度太宽显示不全的问题.

这种情况,在后台上传图片时,如下图,上传成功后,图片宽度默认是图片的真实宽度,可以把他设置为100%,或留空不填,高度也留空不填.

[![204448_nPqv_924636.png][]][204448_nPqv_924636.png]

内容页假如这样写法

[?][Link 1]

<table style="width:687px;"> 
 <tbody> 
  <tr> 
   <td style="vertical-align:baseline;"> <p>1</p> </td> 
   <td style="vertical-align:baseline;width:658px;"> <p><code>&lt;</code><code>div</code>&nbsp;<code>class</code><code>=</code><code>"detail"</code><code>&gt;&nbsp;这里是内容及图片&lt;/</code><code>div</code><code>&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

cs样式可以如下写法.如果担心在电脑上浏览时,图片过大撑破页面,可以增加一个类似这种样式.max-width:650px

[?][Link 1]

<table style="width:687px;"> 
 <tbody> 
  <tr> 
   <td style="vertical-align:baseline;"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> </td> 
   <td style="vertical-align:baseline;width:658px;"> <p><code>.detail&nbsp;&nbsp;img{ </code></p> <p><code>&nbsp;</code><code>display</code><code>:</code><code>block</code><code>;</code><code>margin</code><code>:</code><code>0</code>&nbsp;<code>auto</code><code>;</code><code>padding</code><code>:</code><code>10px</code><code>;&nbsp;</code><code>/*&nbsp;max-width:650px&nbsp;*/</code></p> <p><code>}</code></p> <p><code>/*以下为兼容手机代码*/</code></p> <p><code>@media(</code><code>max-width</code><code>:</code><code>760px</code><code>){ </code></p> <p><code>.detail&nbsp;&nbsp;img{ </code><code>max-width</code><code>:&nbsp;</code><code>100%</code><code>;</code><code>height</code><code>:&nbsp;</code><code>auto</code><code>;</code><code>width</code><code>:&nbsp;</code><code>auto</code><code>\</code><code>9</code><code>;}</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

![70][]

[204448_nPqv_924636.png]: /images/20210923/3b7dc5e455e34345b2539902f0fbd309.png
[Link 1]: http://my.oschina.net/ppss/blog/654798?fromerr=rfmD8V5X#
[70]: /images/20210923/8a41a7f6fb99465f97749c6373440180.png