Heim >Web-Frontend >CSS-Tutorial >Beispielcode-Freigabe zur Steuerung der Bildgröße mit CSS+JavaScript
Beispielcode-Freigabe zur Steuerung der Bildgröße mit CSS+JavaScript
- 黄舟Original
- 2017-07-26 13:39:391614Durchsuche
Verwenden Sie js und css, um die Realität des Bildes in einem festen Bereich zu steuern. Wenn es größer als dieser Bereich ist, wird es proportional skaliert, und wenn es kleiner als dieser Bereich ist, wird es zentriert.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css+js完美控制图片大小</title>
<script type="text/javascript" language="JavaScript">
<!--
var flag=false;
function DrawImage(ImgD){
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
flag=true;
if(image.width/image.height>= 400/400){
if(image.width>400){
ImgD.width=400;
ImgD.height=(image.height*400)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"x"+image.height;
}
else{
if(image.height>400){
ImgD.height=400;
ImgD.width=(image.width*400)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"x"+image.height;
}
}
}
//-->
</script>
<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
li {
list-style:none;
}
img {
border:0;
}
.group_head {
width:400px;
height:400px;
line-height:400px;
border:1px solid #ccc;
overflow:hidden;
position:relative;
text-align:center;
float:left;
margin-right:10px;
}
.group_head p {
position:static;
+position:absolute;
top:50%;
vertical-align:middle
}
.group_head img {
position:static;
+position:relative;
top:-50%;left:-50%;
vertical-align:middle
}
-->
</style>
</head>
<body>
<ul class="jobGroup">
<li><a href="http://www.jb51.net">
<div class="group_head">
<p>
<img width="400" height="400" src="http://www.baidu.com/img/baidu_logo.gif" onload="DrawImage(this);"/>
</p>
</div>
</a>
</li>
</ul>
</body>
</html>Das obige ist der detaillierte Inhalt vonBeispielcode-Freigabe zur Steuerung der Bildgröße mit CSS+JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Beispielcode-Sharing zur Verwendung von CSS zum Anpassen der BildgrößeNächster Artikel：Beispielcode-Sharing zur Verwendung von CSS zum Anpassen der Bildgröße