2 over0609 over0609 于 2016.01.29 16:51 提问

怎样让a链接包着的图片随页面自适应大小
 <div id="container">
    <div >
        <img src="./ycj1.jpg" style="width:100%;"/>
    </div>
    <div style="height:100px;width:100%;background:#0E1939;text-align:center">
        <a href="index.php?act=store_joinin&op=index"><img src="./mrz.png" onMouseOver="this.src='./mrz_h.png'" onMouseOut="this.src='mrz.png'" style="display:inline-block;padding-top:20px;" /></a>
    </div>
    <div>
        <img src="./ycj11.jpg" style="width:100%;"/>
    </div>
    <div >
        <img src="./ycj2.jpg" style="width:100%;"/>
    </div>
    <div >
        <img src="./ycj3.jpg" style="width:100%;"/>
    </div>
    <div >
        <img src="./ycj4.jpg" style="width:100%;"/>
    </div>
    <div style="height:100px;width:100%;background:#0E1939;text-align:center">
        <a href="index.php?act=store_joinin&op=index"><img src="./rz.png" onMouseOver="this.src='./rz_h.png'" onMouseOut="this.src='rz.png'" style="display:inline-block;padding-top:20px;"/></a><!-- index.php?act=login&op=register&clearSession=true! -->
    </div>
    <div style="height:100px;width:100%;background:#0E1939;text-align:center">
        <a href="index.php?act=store_joinin&op=index"><img src="./sc.png" onMouseOver="this.src='./sc_h.png'" onMouseOut="this.src='sc.png'" style="display:inline-block;padding-top:20px;" /></a>
    </div>
    <div>
        <img src="./ycj41.jpg" style="width:100%;"/>
    </div>  
</div>

_

以上是我的源代码,其中三个a链接包裹的img标签就是我头疼的地方了,这三个是用来做按钮的,上下的图片都可以自适应页面大小,但是这三个按钮就不行,不知道怎么办求助大家

页面原始大小:

页面原始大小

页面缩小之后:

页面缩小之后

1个回答

showbo
showbo   Ds   Rxr 2016.01.29 16:59

over0609
over0609 回复无聊码农: 好吧,大小我调整width可以搞定,但是display:block了之后整个那一条都变成a链接了,就是那个包着a链接的div
2 年多之前 回复
over0609
over0609 回复无聊码农: 虽然是可以自适应了,但是一开始的大小太大了,占了整个屏幕80%的样子
2 年多之前 回复
over0609
over0609 如果是代码的话需要点那个 </>插入代码片
2 年多之前 回复
showbo
showbo <a href="index.php?act=store_joinin&op=index"><img src="./sc.png" onMouseOver="this.src='./sc_h.png'" onMouseOut="this.src='sc.png'" style="padding-top:20px;width:80%;margin:0 auto;display:block" /></a>
2 年多之前 回复
over0609
over0609 看不见诶
2 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
随浏览器大小变化的图片,如何做相当于热点的链接或点击事件
网页中的一张图片,如果不随着浏览器的宽高变化
如何让body背景图自适应浏览器窗口大小
这两天真的被背景图问题弄的头大,一会是浏览器窗口大小改变,背景图就重复,或者是浏览器有滚动条,或者加上no-repeat之后,重复的部分就变成空白!!!真的是一个头,两个大!!!!! 现在终于找到解决方法了,不仅不重复,还没有滚动条,简直整个人都解放了,哈哈哈!下面附上代码,其实是特别简单的问题,但某些时候,我们就是会被一些很小的问题困扰很久...... html{
C#如何实现控件随窗体大小的改变而自动适应
Anchor属性。Anchor属性定义控件的定位点位置。当控件锚定到某个窗体时,如果该窗体的大小被调整,那么该控件维持它与定位点位置之间的距离不变。例如,如果“:Button”控件锚定到窗体的左、右和底边缘,那么当调整该窗体的大小时,Button控件水平调整大小,维持到该窗体左边和右边的距离不变,另外控件垂直定位其自身,以便其到窗体底边的距离始终不变,如果控件未锚定而窗体的大小被调整,则该控件相对
SVG窗口自适应脚本编写
SVG如果嵌入其他如iFrame,当获取到了iFrame的大小后,如何内部做自适应呢?这时只需要在onload事件里写函数,改变svg节点的tramsform,来达到自适应的过程。本实例svg用的是图也SVG编辑器(svgsvg.com)编辑的,svg节点的transform有部分浏览器支持,有部分浏览器不支持,支持的浏览器有谷歌,火狐等,IE不支持,Android 手机端也不支持。 以下是自适
让控件随窗体大小变化而变化~WinForms控件自适应窗体大小
简单的来说就是监控,定位+保持比例。 例如界面分为左右下三部分,其中下部分最好解决。使用Dock属性直接定位到Bottom。难点就是上面的左右两块。 我的做法是:外面套一层,然后分割为左右两部分。这里采用TableLayoutPanel为例。将TableLayoutPanel调整为一行两列左右各占50%的单元格形式。 并将TableLayoutPanel的Dock属性调整为Fil
JavaScript让背景图片自适应窗口大小代码
JavaScript让背景图片自适应窗口大小代码     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> JavaScript让背景图片自适应窗口大小代码    *{margin:0;padding:0;} #b
一个页面一张图片,页面高大小随图片高变化
最近有这样一个需求:产品的图文详情页,完全是一张图片,且图片的高度不一定,需要页面大小随图片的高度变化 核心实现代码如下: int screenWidth = DensityUtils.getScreenWidth(this); //动态配置图片宽高 ViewGroup.LayoutParams lp = img.getLayoutParams();
自适应网页里,字体大小如何自适应屏幕
字体大小使用 em, rem 作为单位,然后使用 media query 来调整 html 元素的 font-size 自适应网站 html {font-size: 62.5%!important; /* 10÷16=62.5% */} @media only screen and (min-width: 481px){ html { font-size: 94%!im
让图片自适应屏幕大小
让图片自适应屏幕大小
widget背景图片自适应大小
1 说明widget要想使背景图片拉伸自适应大小,setsheetstyle的时候应该使用border-image,而不是background-image,如果使用的background-image那么图片会以填充的方式自适应大小 2 QLabel 的pixmap自适应大小 setScaledContents(true);