css - 显示图像背景的完整宽度和高度

标签 css

这似乎是一个重复的问题,但在我的情况下没有任何效果。 我想将一张图片放在 div 中并完整显示它,直到可能为止。我的图像是一个四 Angular 有边的矩形,我希望根据 div 的大小在 div 中看到它。

enter image description here

    .container_img{
       border:1px solid red;
       margin-top:-14px;
       display: table; 
       margin-top:2px; 
       width: 709px; 
       height: 141px;     
       background-image: url("https://i.imgur.com/VBOZfaY.png");
       background-repeat: no-repeat;
    }
    <div class="container_img"></div>
    

https://jsfiddle.net/86avtx54/

最佳答案

添加 background-size: 100% 100%;。请参阅下面的代码片段

   .container_img{
       border:1px solid red;
       margin-top:-14px;
       display: table; 
       margin-top:2px; 
       width: 709px; 
       height: 141px;     
       background-image: url("https://i.imgur.com/VBOZfaY.png");
       background-repeat: no-repeat;
       background-size: 100% 100%;
    }
 <div class="container_img"></div>

关于css - 显示图像背景的完整宽度和高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55168852/

相关文章:

javascript - 当其他元素出现和消失时平滑地改变 HTML 元素位置的通用方法

javascript - 如何在JavaScript中动态创建CSS类并应用?

javascript - 如何更改 <a href""></a> 标签超链接部分内的图像大小

css - 谷歌浏览器中没有谷歌字体

html - 与内容背景颜色相同的工具提示箭头

html - Bootstrap 全宽 Navbar 侧面有两种不同的背景颜色

css - 使用 css/zurb-foundation 设置最小站点范围

css - 选择除包含单词图标的类之外的所有跨度元素

css - 防止 Bootstrap 导航栏在调整为小窗口时向下跳转

html - Internet Explorer 的行高替代方案 <= 7