缩小设备的内容

Question

我正在使用tinymce编辑器来允许用户创建自己的内容。当他们上传图像时，在移动设备上查看输出时会导致侧滚动。

如何缩小图像大的整个框的内容？

我尝试过使用css媒体查询，但由于图像设置为一定宽度，因此它们仍然很大。

我已经改变了我的CSS，但我仍然遇到同样的问题：

.coupon
{
   min-height:202px;
  background-color:#fff;
  color:#000;
 padding:2px;
 text-align:left;
 max-width:100%;
 height: auto;

}

请参阅示例。播放测验并选择两个问题的随机答案，以查看过度滚动图像http://www.quizzerland.com/?q=bbv.php&desc=vvv

Answer 1

要使图像在宽视口上使用其自然宽度或width=属性给出的宽度，并在缩小视口上缩小它们可以使用媒体查询，如下所示：

@media screen and (max-width: 640px) {
   img {
     height: auto;
     max-width: 100%;
   }
}

根据实际设计替换640px。如果您完全不信任您的用户，那么您可能希望始终限制max-width图像，而不仅仅是在狭窄的视口上;在这种情况下，只需摆脱媒体查询：

 img {
   height: auto;
   max-width: 100%;
 }