`

动态设置图片宽度为屏幕分辨率宽[并保证其不出现横向滚动条]

JavaScriptHTML 
阅读更多
  1. <%@ page contentType="text/html; charset=gb2312" language="java"%>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  5. <title>动态设置图片宽度为屏幕分辨率宽[并保证其不出现横向滚动条]</title>
  6. </head>
  7. <body topmargin="0" leftmargin="0">
  8. <table width="100%" height="100" border="0" cellpadding="0" cellspacing="0">
  9.   <tr>
  10.     <td><img src="aa.jpg" id="aa" width="100%" height="100"></td>
  11.   </tr>
  12. <script type="text/javascript">
  13. // 动态设置图片宽度为屏幕分辨率宽[并保证其不出现横向滚动条] 23为调节数字,可以变化的
  14. document.getElementById("aa").width=window.screen.availWidth-23;
  15. </script>
  16. </table>
  17. </body>
  18. </html>
分享到：
| SELECT INPUT的一种样式定义[--图--]
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery横向广滚动告

    标题中的“jQuery横向广滚动告”指的是使用jQuery库实现的一种广告展示方式，它通常是指在网页上水平方向滚动的广告条。这种效果可以吸引用户的注意力，同时为网站提供更多的广告位，尤其适用于有限的垂直空间。 ...

    自适应横向宽屏幻灯片代码

    - `&lt;img&gt;`元素用于加载幻灯片图片，可以设置其`srcset`属性来提供不同分辨率的图片，以适应不同的设备和屏幕尺寸。 - `&lt;nav&gt;`元素可创建导航条，包含控制幻灯片切换的按钮。 2. **CSS3 属性**： - `display: ...

    HorizontalScrollView与ViewGroup实现横向滑动查看图片

    这个组件允许用户向左或向右滑动查看超出屏幕范围的内容，类似于网页中的水平滚动条。`ViewGroup` 是Android中所有视图容器的基类，它可以包含多个子视图，并负责管理这些子视图的布局和交互。在这个场景中，我们将...

    全屏响应式文章水平横向布局

    4. **Overflow-X与Overflow-Y**：为了实现水平滚动，需要对容器设置overflow-x: auto或overflow-x: scroll，这样当内容超出容器宽度时，会出现水平滚动条。同时，保持overflow-y: hidden，避免垂直方向出现滚动条，...

    横版瀑布流自动排序及页面左右滑动

    这是一种不规则的网格布局，每个元素（如图片或卡片）的宽度固定，但高度根据内容自适应，形成类似瀑布下落的效果。在横版瀑布流中，这种效果是水平方向上的，使得页面元素沿水平线错落分布，而非传统的垂直排列。 ...

    网络规划课程设计报告.pdf

    例如，常见的三列布局可以通过设置div为左浮动，并将宽度设为33%，保证在屏幕宽度变化时，内容依然能整齐排列。 其次，液态式图片技术解决了图片在不同设备上的适配问题。液态图片能保持正确的宽高比并在移动设备上...

    第十五课 页面功能区域实战（布局）-011

    图片的宽度设为100%，并设置最小宽度，以确保在窄屏设备上仍保持适当比例。 - 固定布局：例如`#header .headerContent`设定了1200px的宽度，并通过`margin: 0 auto`居中，这种布局在不同分辨率下不会自适应，保持...

    JQ 手机触屏切图 可定时滚动

    "JQ 手机触屏切图 可定时滚动"是一个专为手机端设计的功能，旨在提供一种动态、流畅的图片展示方式，使用户可以通过触摸屏幕来浏览一系列横向排列的切图，并且还具备自动定时滚动的效果，提升用户体验。 首先，我们...

    javascript 网页

    在本案例中，目标是让网页在屏幕分辨率较小时等比例缩小，同时避免页面出现横向或纵向滚动条，确保所有内容都能完整显示在用户的视野内。 #### 二、实现原理 本例中的核心思路是根据当前屏幕的宽度动态调整指定...

    Flex air中TileList控件实现相册

    通过设置其`columns`属性可以指定每行显示的列数，而`columnWidth`和`rowHeight`则分别定义了每列和每行的宽度和高度。此外，`dataProvider`属性用于绑定数据源，使TileList能够显示数据。 二、相册数据结构 首先，...

    适应不同的屏幕

    这样，无论屏幕尺寸如何，内容都可以保持相对比例，避免出现横向滚动条。 3. **自适应图片和媒体**：图片和其他媒体元素也可以使用相对单位，如百分比，或者利用CSS的`object-fit`属性，使其在不同尺寸的屏幕上保持...

    模仿网易新闻部分界面

    3. **横向滚动**（Horizontal ScrollView）：横向滚动主要用于展示多列或者宽度超过屏幕的内容。在新闻应用中，横向滚动可能用于图片轮播、广告展示或是不同分类的切换。Android的HorizontalScrollView组件可以轻松...

    《程序天下：JavaScript实例自学手册》光盘源码

    17.9 为textarea加横向滚动条 17.10 记录滚动条位置 17.11 彩色滚动条 17.12 Windows XP的滚动条 第18章 在线考题案例 18.1 在线考试代码 18.2 在线考试代码（二） 18.3 在线测试代码（三） 18.4 多选考试题 18.5 ...

    程序天下:JavaScript实例自学手册

    17.9 为textarea加横向滚动条 17.10 记录滚动条位置 17.11 彩色滚动条 17.12 Windows XP的滚动条 第18章 在线考题案例 18.1 在线考试代码 18.2 在线考试代码（二） 18.3 在线测试代码（三） 18.4 多选考试题 18.5 ...

    Dive_into_Responsive_Web_Design（响应式设计电子书）

    传统的网页设计往往采用固定宽度的布局，在小屏幕上显示时会出现滚动条或者内容被挤压变形的情况。响应式设计解决了这一问题，它允许网页根据用户的屏幕大小自动调整布局，从而提供更佳的用户体验。 #### 3. 响应式...

    android水平滑动listview

    默认情况下，HorizontalScrollView没有滚动条，但你可以通过设置`android:scrollbars="horizontal"`并重写`onDraw()`方法来自定义滚动条样式。 6. **第三方库**： Android SDK本身并不直接支持HorizontalListView...

    网络规划课程设计报告(20210919110025).pdf

    - **流体式表格**：通过使用相对单位（如百分比）替代绝对单位（如像素），使网页布局和元素大小随浏览器窗口宽度动态调整，避免横向滚动条。例如，采用浮动布局和百分比宽度的div，可以实现三列式的自适应布局。 ...

    商务业务趋势响应式网页模板

    1. **流式布局（Fluid Layout）**：这种布局方式允许网页内容根据浏览器窗口大小自动调整，确保内容在任何屏幕上都能正确显示，不会出现横向滚动条。 2. **媒体查询（Media Queries）**：CSS3的媒体查询是实现响应...

    响应式word教程电脑办公软件教程资源网站源码模板(自适应手机移动端).txt

    3. **图片自适应**：确保图片能够根据容器的大小自动缩放，避免横向滚动条的出现。 4. **Flexbox和Grid布局**：这两种现代CSS布局模式为实现复杂的响应式布局提供了强大的工具。 5. **JavaScript增强**：虽然不是...

    响应式网上商店CSS3模板

    2. **弹性图片和媒体**：使用max-width: 100%属性，确保图片和其他媒体不会超过其容器的宽度，避免在小屏幕上出现横向滚动条。 3. **模块化设计**：将网页划分为可重用的组件或模块，便于在不同设备上调整布局。 4. ...

Magicbox
Global site tag (gtag.js) - Google Analytics