Question

我有这个html语法：

   it('should save the event', () => {

        var testEvent = { id: 7, name: "AngularJS"}

        mockHttp.post.and.returnValue(Observable.of(false))

        techEventService.saveEvent(<IEvent>testEvent)

        expect(techEventService.saveEvent).toBe(jasmine.any(Object))

    })

我在CSS中定义了：

<div class="kalis-img" style="background-image: url(https://example.com/myimage.jpg);"></div>

如果我想将图像设置为300px，则可以正常工作。我尝试设置.kalis-img { background: center center/cover no-repeat; width: 300px; height: 300px; display: inline-block; }以使此响应，但我得到一个空白图像。有没有办法制作背景图片，反应灵敏？

Answer 1

这是你的一个想法：
the end result
code view

HTML

<div class="kalis-img" ></div>

CSS

.kalis-img {   
 background:url(path_to_image) center center/cover no-repeat;
 width: 100%;
 /*     height: auto; */
 /*     display: inline-block; */
 height:66.67vw;
}

你会看到我将高度设置为66.67vw，这相当于视口宽度的2 / 3rds，选择对你的设计有意义的任何东西。

修改

现在它是4个相邻的矩形，每个300px，取一个最大宽度为1200px。当屏幕变小时，我想要宽度和宽度这4个矩形的高度变小，使它们变得更小仍在同一排。

看看这是否适合您：https://codepen.io/panchroma/pen/wqqoZj

代码的重要部分是：
HTML

<div class="wrapper"> <div class="image image1" ></div> ... <div class="image image4" ></div> </div> 

<强> CSS

.wrapper{ max-width:1200px; margin:0 auto; } .image { height:400px; /* adjust as required */ display:inline-block; width:25%; float:left; box-sizing: border-box; /* needed to remove browser padding or borders which could break single row layout */ } .image1, .image2, .image3, .image4{ background:url(path_to_image) center center/cover no-repeat; }
祝你好运！

响应背景图像与中心/封面

1 个答案: