关于如何设置图片大小和图片形状

时间:2024-02-17 16:39:28

        一般来说图片没有经过PS的修改是没有办法直接使用的,但是我们可以用代码来控制图片的大小和形状。

       改变图片大小的话我们可以直接改图片的属性就可以实现。但在这样做的话有一个缺点,就是会影响图片的整体性,从而导致图片的内容会扭曲,变得

      不美观。

      改变图片大小直接改变图片的宽高就行了:宽 width: npx;高 height:npx;n代表你想要的数值。代码如下:

     

    如果想把图片放在一个框里的话,我们只需要把图片的宽高设置成自适应就行了,在宽高后面写上auto。

    代码如下:

     

     改变图片的形状直接在属性里边加上一个border-radius:0-50%。border-radius是一个设置圆角,当数值达到50%的时候就是一个圆形了

     border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性。

    如果省略 bottom-left,则与 top-right 相同。如果省略 bottom-right,则与 top-left 相同。如果省略 top-right,则与 top-left 相同。

   然后把图片溢出去的的多余部分隐藏:在属性里面加上一个overflow:hidden;

   overflow后面是有5个值,分别是:visible,hidden,scroll,auto,inherit。

   visible:默认值,内容不会被隐藏,会显示在元素框外面。

   hidden:内容会被修剪,元素框之外的会被隐藏,不可见。

   scroll:内容会被修剪,但是浏览器会以滚动条的方式显示查看其他内容。

    auto:这个属性跟scroll差不多。

    inherit:会从父级元素继承overflow属性的值

————————————————————————

以上就是这些,希望能帮到你。