移动端图片超过屏幕宽度处理办法

在手机端网页开发时:

有时候我们不希望图片宽度超过屏幕宽度

因为图片太宽会出现滚动条,滚动条是手机端网页的大忌。

解决办法:

img{max-width:100%;!important}

这样即使图片再大也不会因为宽度而超过屏幕的宽度。

时间: 2024-10-14 14:05:06

移动端图片超过屏幕宽度处理办法的相关文章

iOS-UIWebView加载HTMLString图片显示超过屏幕宽度,导致webView可以左右滑动处的理方法

修改webview图片适配的代码,是使用js去修改图片适配屏幕宽度: // 网络请求加载的数据,进行字典转模型 NSDictionary *dict = [result objectForKey:@"data"]; HQNewsDetailModel *model = [HQNewsDetailModel mj_objectWithKeyValues:dict]; /** * model.details就是后台返回的HTMLString * " $img[p].style.w

ios navigationcontroller 滑动返回与webview加载html图片自适应屏幕宽度

1 .ios navigationcontroller 滑动返回 滑动返回是navigationcontroller默认返回按钮自带的功能,如果返回按钮自定义该功能失效, 解决的办法有两个: ① self.navigationItem.backBarButtonItem =   [[UIBarButtonItem alloc]initWithCustomView:button];//这个方法用不了 只能用 self.navigationItem.backBarButtonItem = [ [UI

图片超过DIV宽度自适应

.main_con img { max-width: 610px; height: auto; cursor: pointer; border: 0px double #cccccc; padding: 2px; zoom: expression( function(elm) { if (elm.width>610) { var oldVW = elm.width; elm.width=610; elm.height = elm.height*(610 /oldVW); } elm.style.

Android:漫画APP开发笔记之ListView中图片按屏幕宽度缩放

一.listview <ListView android:id="@+id/piclist" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_above="@+id/bottom" android:layout_marginTop="106dp" android:divider

ios webview 图片自适应屏幕宽度

//这个知识点主要是自己最近在尝试写后台接口 在移动端展示的时候需要用到这个知识点,在webViewDidFinishLoad方法里面执行一段js代码 拿到各个图片 判断其宽度是否大于当前手机屏幕尺寸,是的话则调整为屏幕宽度显示,不是的话则原样显示 代码如下: 1 - (void)webViewDidFinishLoad:(UIWebView *)webView { 2 // 2.都有效果 3 NSString *js=@"var script = document.createElement(

Android--WebView显示Html,让其中的图片适应屏幕宽度

//设置 防止图片太大超出屏幕 tv_web_danGe.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN); 不知道为什么,这句代码失效了,所以我就在html文本前面加了个样式, <style>img{ max-width:100%;height:auto}</style> 这个100%是设备的宽度 改成这样超过屏幕的就可以全屏展示 方便多了

angularJS+Ionic移动端图片上传的解决办法

前端开发中经常会碰到图片上传的问题,网上的解决办法很多,可是有些图片上传的插件会有一些附属的插件,因此因为一个图片上传的问题可能额需要引入其他插件到项目中,久而久之项目会不伦不类,有时候插件之间也会有一些冲突,所以我们可以自己写一个图片上传的方法. 今天的demo是帮朋友做的一个移动端微信公众号项目,项目架构采用angular+ionic,因为对dom的操作jQuery会方便很多,但是jQuery比较厚重,所以最后选择用轻量级的zepto来对项目dom进行操作. 项目中有一个需求是上传个人作品,

ImageView图片适应屏幕宽度,等比例拉伸

<ImageView     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:scaleType="fitCenter"     android:adjustViewBounds="true" />

Android根据屏幕宽度,按比例缩放图片

原文链接:http://www.codeceo.com/article/android-zoom-image.html ImageView有scaleType属性可以缩放图片,让图片铺满屏幕宽度,但是会出现压缩或裁剪的情况. ImageView的scaleType的属性分别是matrix(默认).center.centerCrop.centerInside.fitCenter.fitEnd.fitStart.fitXY android:scaleType="center" 保持原图的大