我最近正在做一个网页,如下图
发现我的网页的图片,已经超出了窗口的大小,而超出的部分有空白,我不想有这空白,这样的网页不美观。图片太大了,已经超出了窗口的宽度和高度,尤其是宽度。
我试着改了图片的宽度和高度,如下。
<img src="${basePath}/img/ee.png";alt="长三角联盟";style="width:100%;height:100%"></img>
我想把100%改成80%或70%,或者改成其他大小,可是图片还是按照原来的大小显示在窗口里,长度宽度没有任何改变,没有任何作用。这是为什么。
我想让这个图片的大小能够适应窗口的大小,尤其是宽度,不会留出空白,不会显示滚动条,尤其是横向的滚动条。应该怎么做呢。也就是网页浏览器的窗口有多少大,浏览器的窗口宽度高度是多少,这图片就有多少大,图片的宽度与浏览器窗口宽度一致。
应该怎么改呢?全部代码下面。
<%@ page language="java" import="java.util.*" pageEncoding="utf-8" contentType="text/html; charset=utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
int port=request.getServerPort();
if(port==80){
basePath=request.getScheme()+"://"+request.getServerName()+path;
}else{
basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
}
request.setAttribute("basePath", basePath);
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body class='ban' style="background-position: center;height:100%;with:100%;background-size: cover;
background-repeat: no-repeat;background-image:url('${basePath}/img/pink.jpg')";>
<div style="margin-bottom: 24px">
<br>选择城市分站
<select onchange="window.open(this.options[this.options.selectedIndex].value);">
<option value="选择城市"></option>
<option value="${basePath}/Shanghai.jsp">上海</option>
<option value="${basePath}/Hangzhou.jsp">杭州</option>
<option value="${basePath}/Nanjing.jsp">南京</option>
<option value="${basePath}/Hefei.jsp">合肥</option>
<option value="${basePath}/Suzhou.jsp">苏州</option>
<option value="${basePath}/Ningbo.jsp">宁波</option>
<option value="${basePath}/Wenzhou.jsp">温州</option>
<option value="${basePath}/Jinhua.jsp">金华</option>
<option value="${basePath}/Yangzhou.jsp">扬州</option>
<option value="${basePath}/Wuxi.jsp">无锡</option>
</select>
<a href="${basePath}/Login.jsp">登录</a>
<a href="${basePath}/Register.jsp">注册</a>
<br>
</div>
<div>
<img src="${basePath}/img/ee.png";alt="长三角联盟";style="width:100%;height:100%"></img>
</div>
</body>
</html>
应该怎么改呢?才能让图片的宽度不超出窗口的宽度,和窗口宽度一致。