网易极客战记官方攻略_网页开发1_大而高

发布于 2020年3月24日

关卡概览和解法

图像可以是任何形状或大小。 大而高,或小而粗壮。

简介

attributes 是可以包含在元素标记内的信息或数据。 例如,可以通过包含宽度和高度attribute来调整 img 元素的大小。

 <!-- The follow adds 2 new attributes other than the src attribute! -->
<!-- width and height control how tall and wide elements are. -->
<img width="200" height="300" src="/anya-portrait.png">

默认代码

 <!-- 可以使用属性调整<img>标签的大小。 -->
<!-- width =和height =强制<img>标签的大小。 -->
<!-- 如果设置了图像,图像将按比例缩放。 -->
<!-- 如果两者均设置,则<img>延伸至大小。 -->
<!-- 此图像是32x32而不是默认的100x100 -->
<img width="32" src="/file/db/thang.type/529fff23cf1818f2be000003/portrait.png">
<!-- 这个图像被强制为200×100! -->
<img width="200" height="100" src="/file/db/thang.type/535ef031c519160709f2f63a/portrait.png">
<!-- 添加另一个<img>标签并使用宽度或高度: -->

概览

#属性

除了src,还有更多attributes 。 要定义<img>的大小,你可以使用heightwidthheightwidth默认为 pixelpx。 因此将 200 像素宽的图像设置为 50 会将其缩小 25%,而不是 50%。

如果仅包含宽度或高度中的一个,则图像将按比例缩放。 或者,也就是说,如果设置了宽度,则图像的高度将自动更改以保持图像的原始比例。

如果设置了 both 高,则图像将强制调整大小以匹配这些数字。

 <!-- An image tag with the width, height and src attributes. -->
<img width="200" height="300" src="/file/db/thang.type/529ab1a24b67a988ad000002/portrait.png">

大而高 解法

 <!-- 可以使用属性调整<img>标签的大小。 ·-->
<!-- width =和height =强制<img>标签的大小。 ·-->
<!-- 如果设置了图像,图像将按比例缩放。 ·-->
<!-- 如果两者均设置,则<img>延伸至大小。 ·-->
<!-- 此图像是32x32而不是默认的100x100 ·-->
<img width="32" src="/file/db/thang.type/529fff23cf1818f2be000003/portrait.png">
<!-- 这个图像被强制为200×100! ·-->
<img width="200" height="100" src="/file/db/thang.type/535ef031c519160709f2f63a/portrait.png">
<!-- 添加另一个<img>标签并使用宽度或高度: ·-->
<img width="300" height="50" src="https://www.codecombat.com/file/db/thang.type/548cf11b0f559d0000be7e2b
    /portrait.png">