html - Comment CSS gère-t-il la mise à l'échelle des images?

Question

Structure HTML
`<dl onclick="goDetail(1)" class="cookbook-list">
<dt class="cookbook-img"> .cdn.xiangha.com/cai...
</dt>
<dd class="cookbook-name">Riz aux côtes de porc</dd> Tonifier le yang, renforcer le yang, nourrir les reins, nourrir le yin, nourrir les reins, le qi et le sang</dd></dl>`

.cookbook-list {
    display: block;
    height: 13.2rem;
}

.cookbook-list dt {
    width: 100%;
    height: 10rem;
    position: relative;
    overflow: hidden;
}
.cookbook-list img {
    width: 100%;

}

L'image dans la balise img n'est pas entièrement affichée. Comment puis-je la faire afficher complètement selon les proportions normales ?

Answer 1

Utiliser la relation en pourcentage, principe : p>img，其中 p 标签为相对定位，高度为一个百分比，img Utiliser le positionnement absolu pour remplir l'objet parent, le code est le suivant :

/* 图片等比缩放 */
.scaling {
    background-color: #fafafa;
    font-size: 0;
    height: 0; // 去除高度
    position: relative;
}
.scaling > img {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
/* 图片等比缩放 */
.scaling.scaling-4-3 {
    padding-bottom: 75%; /* (300/400)*100 (高度/宽度)*100 得出比例 */
}

La largeur est déterminée en fonction de la largeur réelle. En fonction de votre page, sa largeur doit être la largeur de l'écran ou la largeur de son conteneur parent si son parent est librement transformable, alors sa hauteur sera basée sur la proportionnelle. la relation est dimensionnée proportionnellement.

Answer 2

img{
display: block;
max-width: 100%;
}

Answer 3

Chargez l'image avec l'arrière-plan
Puis définissez
background-size:contain
background-repeat: no-repeat

Answer 4

Utilisez la disposition rem, qui changera en fonction de la taille de l'écran

Answer 5

Ajouter un style à l'image img{width:100%;}

Answer 6

• Mise en page

  <p style=“width: 100%; overflow: hidden”>
      <img style="width: 100%" src="images/1.jpg" >
  </p>
  

• La largeur de l'élément parent est déterminée par un pourcentage ou une largeur. Lorsque img est traité à 100 %, il remplira automatiquement la fenêtre parent. Si utilisé, veuillez séparer le style CSS

L'élément img est généralement inclus dans la boîte, principalement pour faciliter le fonctionnement et la sélection.