CSS样式背景图片的自适应

这篇具有很好参考价值的文章主要介绍了CSS样式背景图片的自适应。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

今天在写一个页面的时候,需要用到一个背景图片。 于是我把背景图片放到static(静态文件夹)里面,于是在css样式中引入,但是背景图片又太大,最后的样式就是比例失调。但是由于太久没有用到这个属性了,无可奈何又去找了一番度娘

废话不多说,上代码

1.css图片自适应不变形,这里是通过background-image引入的。整体意思就是让图片在页面中间

. 类名{
    width:100%;
    height:100%
    background-image: url(图片路径);
    background-position: center;
    background-size:cover;
    background-repeat: no-repeat;
}

2.如果是img呢,css自适应的代码如下

.自定义类名 { 
    width:100%; 
    height: auto; 
}

可以让img图片自适应div大小,也可以说是屏幕大小。注意的是使用width:auto,这个意思就是让图片的宽度自动去设置的意思

应该是还有其他的方法,欢迎各位在评论区留言~文章来源地址https://www.toymoban.com/news/detail-503077.html

到了这里,关于CSS样式背景图片的自适应的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • 【QT】 QLabel背景图片自适应窗口大小

    【QT】 QLabel背景图片自适应窗口大小

    这是最终效果: 想要图片跟随窗口自适应大小,首先我们先对QWidget进行网格布局,布局效果如下: 布局完成后添加 QLabel 代码,新建 QLabel 并且设置为可扩展内容,再设置图片放置最后面,否则图片在最前面会遮挡控件。 然后重写 qt 的绘画事件: 这是绘画事件的实现代码:

    2024年02月15日
    浏览(13)
  • 给div添加背景图片时查看图片样式-设置background-size属性
  • CSS 设置背景图片

    一、基本设置 使用 CSS 可以通过以下属性设置背景图片: background-image : 设置背景图片的 URL。 background-size : 设置背景图片的大小。可以设置为绝对像素值,也可以设置为百分比或 \\\"cover\\\"(填充整个容器)或 \\\"contain\\\"(完整显示图片)。 background-repeat : 设置背景图片是否重复。可

    2024年02月12日
    浏览(14)
  • IntelliJ IDEA 常用设置 主题颜色模式、字体、样式、背景自定义颜色及其背景图片(图文步骤)

    IntelliJ IDEA 常用设置 主题颜色模式、字体、样式、背景自定义颜色及其背景图片(图文步骤)

    这里已 IntelliJ IDEA 2018.2.8 版本为例(本人已将主题设置成了暗色主题): 点击 file﹥setting  打开设置 点击 Editor﹥Color Scheme﹥Color Scheme Font 主要的操作有主代码字体,字体字号大小,字体行间距,非主代码字体   主要的操作有颜色,斜体,加粗,背景,下划线,删除线,边框

    2023年04月16日
    浏览(18)
  • QT通过styleSheet样式表设置按钮背景图片自适应大小

    QT通过styleSheet样式表设置按钮背景图片自适应大小

    默认按钮效果   鼠标移动到按钮上的效果     鼠标按住不放的效果      1.添加背景图片资源

    2024年02月11日
    浏览(47)
  • css图片背景

    在CSS中设置图片背景是通过 background-image 属性来实现的。以下是一种简单的方法来设置CSS图片背景: 1.准备图片文件:首先,准备你想要作为背景的图片,并确保它已经上传到你的网站或服务器上。 2.在HTML中添加一个元素:在HTML文件中,你可以添加一个元素(例如 div 或者其

    2024年02月14日
    浏览(9)
  • CSS-设置背景图片的大小

    要设置背景图片的大小,您可以使用CSS的 background-size 属性。这个属性允许您指定背景图片的尺寸。 background-size 属性可以接受不同的值,包括: auto :保持原始图片的尺寸。 cover :将图片缩放到完全覆盖背景区域,可能会裁剪部分图片。 contain :将图片缩放到完全适应背景

    2024年01月25日
    浏览(15)
  • CSS 圆形分割按钮动画 带背景、图片
  • CSS中如何实现背景图片的平铺和定位?

    CSS中如何实现背景图片的平铺和定位?

    前端入门之旅:探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一

    2024年02月10日
    浏览(12)
  • css mask使用,背景透明,图片裁切

    css mask使用,背景透明,图片裁切

    2.1 背景透明 图片与mask生成的渐变的 transparent 的重叠部分,会变得透明,这里#000可以为任意颜色,效果相同 2.2 图片裁切

    2024年01月17日
    浏览(11)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包