Question

我正在尝试为官方Bmw page上的横幅广告寻找灵感。第一个标语为“ 需要速度：数字赛车游戏中的真正肾上腺素”。我想要类似的内容，但是要有图片。

我特别喜欢BMW页面$query = json_encode($jdata); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_POST, true); curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST"); curl_setopt($ch, CURLOPT_POSTFIELDS, $query); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_HTTPHEADER, array( 'Content-Type: application/json', 'Content-Length: ' . strlen($query)) );，该页面的高度很高。我该如何实现？

< 768px

.banner {
  position: relative;
  overflow: hidden;
}
.banner .content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #fff;
  width:100%;
}
.banner .content h2 {
  font-size: 45px;
  margin-bottom: 20px;
}
.banner .content p {
  font-weight: 300;
  margin-bottom: 10px;
}

Answer 1

您可以使用HTML的picture元素。这意味着您可以创建同一图像的多种变体，每种变体都适合您的断点，因此对于每个屏幕变体而言，宽高比都是有意义的。

我确实为此写了一个博客，主要针对SharePoint，但它可能会帮助您：https://sharepointui.wordpress.com/2017/02/20/responsive-images-using-htmls-and-with-sharepoint-image-renditions/

<div class="image__wrapper">   
  <picture>
    <source media="(min-width: 1024px)" srcset="MyImage--xlarge.jpg">
    <source media="(min-width: 640px)" srcset="MyImage--large.jpg">
    <source media="(min-width: 400px)" srcset="MyImage--medium.jpg">
    <source media="(min-width: 0px)" srcset="MyImage--original.jpg">
    <img src="MyImage--original.jpg">
  </picture>  
</div>

Answer 2

通过在宝马网站上使用background-image，您可以达到预期的输出，如下面的工作片段所示，希望对您有所帮助：）

.banner {
  color: #fff;
  background: url('https://www.jungleadventures.com/images/slider-03.jpg') no-repeat center center;
  background-size: cover;
  padding: 100px;
}
.banner h2 {
  font-size: 45px;
  margin-bottom: 20px;
}
.banner p {
  font-weight: 300;
  margin-bottom: 10px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="banner">
  <div class="container">
    <h2>Lorem ipsum dolor sit amet, consectetur</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.</p>
    <a href="#" class="btn btn-primary" role="button">Our Services</a>
  </div>
</div>

Answer 3

您无法使用图片来实现。切记，当屏幕变小时，图片的高度和宽度也变小。如果您在横幅上施加不同的高度，图片将失真。

请牢记这一点，请从一开始就使用较大的图片，以便在调整大小后仍然看起来不错。

在<768px上为Bootstrap横幅提供更高的高度

3 个答案: