CSS中的图像属性和样式设计

吴欣
1,230 阅读5分钟

为什么图像在设计中很重要？不仅是在网站设计中，而且在我们生活的其他方面。如果你访问两个网站，一个有图像，一个没有，你的第一反应是什么？你会更倾向于被有图片的那个网站所吸引。这是因为与文字相比，我们的大脑可以很容易地消费图片。

在这篇文章中，我们探讨了一些可用于图片样式的属性。这些属性将在我们设计网站时派上用场。

内容表。

  1. 如何在HTML内容中添加图片？
  2. 宽度属性
  3. 高度属性
  4. 边框属性
  5. 对象适合属性
  6. 边框-半径属性
  7. 不透明度属性

我们现在将探讨这个话题。

如何向HTML内容添加图像？

我们使用HTML中的img标签来向我们的HTML内容添加图像。然后，我们必须为图像标签指定两个属性。src和alt属性。

src属性是_必需的_属性。它指定了我们的图像在项目路径中的位置。

alt属性作为一个_占位符_，如果图像不能被显示或找到。它给了我们一个图像的描述。

例子。

HTML
<img src="images/my_cat-ink.png" alt="My lovely cat">

这里，图像位于images文件夹中。

我们将讨论的图像属性包括。

  1. 设置宽度。
  2. 设置高度。
  3. 为图像添加边框。
  4. 对象适合属性。
  5. 使用border-radius属性为图像添加圆角效果。
  6. 不透明度。

我们将使用下面的图片来看看我们如何应用这些属性。

my_cat-ink

高度和宽度属性可以使用两个测量单位来指定。

  1. 像素或通常缩写为px
  2. 百分比（%）。

1.宽度属性

一个图像的宽度是通过使用宽度属性来设置的。

使用px的例子

CSS
img {
    width: 200px;
}

使用百分比的例子

CSS
img {
    width: 25%;
}

2.高度属性

一个图像的高度可以通过使用height属性来设置。

使用px的例子

CSS
img {
    height: 200px;
}

使用百分比的例子

CSS
img {
    height: 40%;
}

我们可以使用像素或百分比来设置图像的宽度和高度。如果你需要你的图像是响应性的，建议使用百分比，因为你的图像会根据设备的不同而调整大小。

3.边框属性

为了给图片添加边框，我们使用border属性。
border属性是三个属性的缩写。

  • 边框宽度：这指定了边框的宽度。
  • 边框样式：指定边框的样式。有几个值可以应用。我们将很快探讨它们。
  • border-color：指定边框的颜色。

在指定边框时，顺序是。
border: border-width border-style border-color

使用边界速记法的例子

CSS
img: {
     border: 3px solid green;
}

结果
border

不使用边框速记法的例子

CSS
img: {
     border-width: 2px; 
     border-style: solid;
     border-color: green;
}

border-color属性的值可以用以下方式设置。

  • 颜色名称：如红色
  • 十六进制：如#ff0000
  • RGB值：rgb(255,0,0)
  • HSL值：即hsl(0, 100%, 50%)

border-width属性可以用px、percent(%)、rem、em等单位来指定。

border-style属性有几个值。这些包括。

  • 实线：在图像周围画一条实线。
  • 虚线：在图像周围画出方形虚线
  • 点状：在图像周围画一条点状线。
  • 双线：在图像周围画两条线
  • 无：这是默认值，不画边界。
  • 隐藏：边界是不可见的。

例子

HTML
<img class="solid-border" src="images/my_cat-ink.png" alt="My lovely cat">

CSS
.solid-border: {
     border-style: solid;
}
.dashed-border: {
     border-style: dashed;
}
.dotted-border: {
     border-style: dotted;
}
.double-border: {
     border-style: double;
}
.none-border: {
     border-style: none;
}
.hidden-border: {
     border-style: hidden;
}

4.对象适合属性

假设一张图片在一个容器中，例如一个div元素，object-fit属性定义了图片在div中的大小调整方式。

object-fit属性有几个值。

  • 覆盖：这在填充容器时保留了图像的长宽比。如果容器的长宽比小于图像的长宽比，图像会被裁剪以适合容器。
  • 包含：图像保留其长宽比，但被调整大小以填充容器。
  • 填充：这是默认值。在这里，图像被调整大小以填满容器。它不保留图像的长宽比。图像会被拉长以适应容器。
  • 缩小：图像将选择无或包含以获得尽可能小的图像尺寸。
  • 无：图像不会被调整大小。

例子

HTML
<div class="container">
    <img src="images/my_cat-ink.png" alt="My lovely cat">
</div>

CSS
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 300px;
  background-color: grey;
}
img {
    width: 300px;
    height: 300px;
    object-fit: none;
}
img {
    object-fit: cover;
}
img {
    object-fit: contain;
}
img {
    object-fit: fill;
}
img {
    object-fit: scale-down;
}

结果

  1. 填充(默认)
    fill_new
  2. 覆盖
    cover_neww
  3. 包含
    contain_new
  4. 按比例缩小
    contain_new-1
  5. 无
    none

5.边界-半径属性

这个属性使我们能够通过对图像周围的边框进行圆角处理来创建圆形的图像。
例子

CSS
img {
    width: 200px;
    height: 200px;
    border-radius: 10px;
    object-fit: cover;
}

结果
borderkawa

用于border-radius的单位包括像素(px)和百分比(%)。
为了制作一个圆形的图像，我们将border-radius的值设置为50%，并为宽度和高度指定相同的值。

例子

CSS
img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 50%;
}

结果
cover

6.不透明度属性

为了创建透明图像，我们可以使用不透明度属性。它的取值范围在0.0和1.0之间，默认值是1。默认值是1。要使图像更透明，请使用一个低于1的值。

例子

CSS
img {
    opacity: 0.5;
}

结果
opacity

为了更深入地了解这些属性，我们来看看一些问题。

问题1

这些属性中的哪一个会给图像添加一个圆形的边界？

不透明度

适合对象

边框-半径

宽度

border-radius属性用于降低图像边角的锐度，从而使其成为圆形。

问题2

物体贴合属性的默认值是什么？

无

填充

包含

按比例缩小

填充是默认值。

通过OpenGenus的这篇文章，你一定对CSS中的图像属性和样式设计有了完整的认识。请欣赏。

avatar
文章
阅读
粉丝