个人中心
gpt4 book ai didi

html - 我怎样才能让这个 div 中的所有图像与 div 一起缩放

转载 作者：行者123 更新时间：2023-11-28 10:33:35 27 4
gpt4 key购买 nike

我正在创建一个网站并制作了一个导航横幅并将其拆分为单独的图像并将它们放在标题中。我需要缩放页眉和页面内部的内容，而不是将其压扁在下面。这是我正在使用的 HTML、CSS 和 javascript。

JSfiddle

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body onload="MM_preloadImages('images/images/nav_over_01.gif','images/images/nav_over_02.gif','images/images/nav_over_03.gif','images/images/nav_over_04.gif','images/images/nav_over_05.gif','images/images/nav_over_06.gif','images/images/nav_over_07.jpg')">

    <div class="container">
        <div class="header"><!-- end .header -->
            <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Blank','','images/images/nav_over_01.gif',1)"><img src="images/images/nav_01.gif" width="448" height="150" class="headerimage" id="Blank" /></a>
            <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','images/images/nav_over_02.gif',1)"><img src="images/images/nav_02.gif" width="140" height="150" class="headerimage" id="Home" /></a>
            <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Shop','','images/images/nav_over_03.gif',1)"><img src="images/images/nav_03.gif" width="120" height="150" class="headerimage" id="Shop" /></a>
            <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('blank','','images/images/nav_over_04.gif',1)"><img src="images/images/nav_04.gif" width="1" height="150" class="headerimage" id="blank" /></a>
            <a href="#" class="headerimage" onmouseover="MM_swapImage('Gallery','','images/images/nav_over_05.gif',1)" onmouseout="MM_swapImgRestore()"><img src="images/images/nav_05.gif" width="152" height="150" class="headerimage" id="Gallery" /></a>
            <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('About Us','','images/images/nav_over_06.gif',1)"><img src="images/images/nav_06.gif" width="196" height="150" class="headerimage" id="About Us" /></a>
            <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','images/images/nav_over_07.jpg',1)"><img src="images/images/nav_07.jpg" width="203" height="150" class="headerimage" id="Contact" />   </a>
        </div>
        <div class="content">
            <h1>Maincontent</h1>
            <!-- end .content --></div>
        <div class="footer">
            <p>Footer</p>
            <!-- end .footer --></div>
        <!-- end .container --></div>
</body>
</html>

CSS

  @charset "utf-8";
body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    background-color: #4E5869;
    margin: 0;
    padding: 0;
    color: #000;
}


ul, ol, dl { 
    padding: 0;
    margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;  
    padding-right: 15px;
    padding-left: 15px;
}
a img { 
    border: none;
}


a:link {
    color:#414958;
    text-decoration: underline;
}
a:visited {
    color: #4E5869;
    text-decoration: underline;
}
    text-decoration: none;
}


.container {
    width: 100%;
    max-width: 1260px;
    min-width: 780px;
    background-color: #FFF;
    margin-top: 20;
    margin-right: auto;
    margin-bottom: 20;
    margin-left: auto;
    clear: both;
    padding-right: 10%;
    padding-left: 10%;
}
.headerimage {

    max-width: 100%;

    max-height: 100%;
}



.header {
    background-color: #6F7D94;
    text-align: justify;
    max-height: 10%;
    max-width: 100%;
}


.content {
    padding: 10px 0;
}


.content ul, .content ol { 
    padding: 0 15px 15px 40px;
}


.footer {
    padding: 10px 0;
    background-color: #6F7D94;
}


.fltrt {  
    float: right;
    margin-left: 8px;
}
.fltlft { 
    float: left;
    margin-right: 8px;
}
.clearfloat { 
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

Javascript

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

最佳答案

最好的办法是将标题容器设置为 

display:block;

然后将标题中的每个 anchor 元素设置为具有一定的百分比宽度。为了便于争论，我让它们都相等并且它们的宽度之和为 100%。然后您可以将图像设置为

img {width:100%;}

为了填充元素。

http://jsfiddle.net/ySB9e/6/

只是提一下:缩放图像不一定是最佳做法；值得研究设置断点并根据屏幕大小加载不同的背景图像。

您可以在 MDN https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries 上阅读有关媒体查询的信息

关于html - 我怎样才能让这个 div 中的所有图像与 div 一起缩放，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23429086/

27 4 0
文章推荐： javascript - 通过jquery html()设置html的缺点
文章推荐： javascript - 在E4X中过滤2个不同的节点？
文章推荐： php - 如何编辑 htaccess 文件
文章推荐： javascript - 即使页面完全渲染后，浏览器仍显示一半进度条
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com