communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > html中怎么把图片按比例缩放在<span>里面_html/css_WEB-ITnose

html中怎么把图片按比例缩放在<span>里面_html/css_WEB-ITnose

WBOY
Libérer： 2016-06-24 12:08:59
original
1641 Les gens l'ont consulté

我在中放一个背景图片，当图片过大就会显示一部分出来，过小的时候会自动居中。请问怎么设置才会让图片不管过大还是过小都全部显示。 求指点下。


回复讨论(解决方案)

百度一个图片垂直横向居中显示的就行了

给图片一个指定的宽度。

1.给图片设置固定宽和高
2.用js控制图片大小，小于设定就按原尺寸，大于则由js按比例调整合适

你在span里面写的需要给span写上宽高 display：block； overflow：hidden；

用jquery，如果宽度大于最大值，就将图片宽度设置成最大宽度值，然后用jquery去实现，高度=实际高度/(实际宽度/最大宽度)

Étiquettes associées：
html中怎么把图片按比例缩放在&lt;span&gt;里面
source：php.cn
Article précédent：div高度一个自适应，一个固定如何实现_html/css_WEB-ITnose Article suivant：搜索下拉框求解_html/css_WEB-ITnose
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
3
2346
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
11
2475
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
2098
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1976
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
2048
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal