Question

我正在使用Bootstrap 4构建一个网站。我不理解的一个领域是图像。在我的页面中，我在顶部有一个图像。图片文件为640x480。当有人在笔记本电脑（大型设备和更高版本）上观看此内容时，我希望图片最多显示为320px高。但是，我想使用宽640像素。同时，因为这是一张高分辨率照片，我不想拉伸或水平重复图像。

同时，在手机（中型设备和下方）上，我希望图片能够填充屏幕的宽度和适当缩放的高度。

我有一个Bootply here。我目前的HTML就是这个

<div class="container">
  <img alt="testing" src="http://i1.tribune.com.pk/wp-content/uploads/2013/06/562140-BillGatesAFP-1371012273-193-640x480.jpg" class="img-rounded banner-img"> 

  <!-- image from: https://www.google.com/url?sa=i&rct=j&q=&esrc=s&source=images&cd=&cad=rja&uact=8&ved=0ahUKEwiAkO-psbvMAhVD2D4KHYX7BwMQjB0IBg&url=http%3A%2F%2Ftribune.com.pk%2Fstory%2F562140%2Fhealthcare-philanthropy-bill-gates-offers-help-to-eradicate-diseases%2F&psig=AFQjCNFGhsgyR1bSKdIqXKywX49HXAWi3A&ust=1462278274506113 -->  
</div>

CSS中的主要内容如下：

.banner-img {
    max-height:320px;
}

@media (max-width: 544px) {
    .banner-img {
        height: auto; 
        max-height:320px; 
        width:auto; 
        max-width:100%;        
    }
}

反过来使用照片对我来说似乎很奇怪。我觉得我想在更大的屏幕上给出图像宽度优先权。在较小的屏幕上，似乎我需要使用图像高度作为优先级。然而，在更大的屏幕上，似乎需要进行一些裁剪，但我不确定如何使用CSS。同时，由于性能问题，我不希望有两个单独的图像。

有谁知道如何解决这个问题？

Answer 1

替换：

@media (max-width: 544px) {

通过

@media (min-width: 544px) {

首先使您成为移动设备的默认类，然后将其覆盖为更大的屏幕，例如引导网格。然后，使用bootstrap中的img-responsive类来使图像响应。

Answer 2

你可以尝试这样的事情。

#BannerIMG{
  /*add this for caption*/
 display: table;

 width:100%;
  /*change the height if requierd*/
 height:320px;
 background:no-repeat;
 background-size: 100% auto;
 background-image:url(http://i1.tribune.com.pk/wp-content/uploads/2013/06/562140-BillGatesAFP-1371012273-193-640x480.jpg);
}

#caption{
  display: table-cell;
  color:white;
  vertical-align: bottom;
  font-size: 25px;
}

<!-- You can use different css files for large or small screens
<link href="SmallStyle.css" rel="stylesheet" media="(max-width: 400px)">
    <link href="LargeStyle.css" rel="stylesheet" media="(min-width: 400px)">
-->

<div class="container">
  <div id="BannerIMG"><span id="caption"><center>Optional Caption</center></span></div>
</div>

Answer 3

为什么不使用background-size: cover;将图像用作容器的背景图像？您可以在容器上设置尺寸，图像将始终填满容器（自动裁剪）。

<强> HTML：

<div class="container">
    <div class="iamge-item" style="background-image: url("http://i1.tribune.com.pk/wp-content/uploads/2013/06/562140-BillGatesAFP-1371012273-193-640x480.jpg"> 
</div>

<强> CSS：

.image-item {
    background-image: url("/path/to/your/image.jpg"); /* if not defined inline*/
    background-size: cover; /* to cover the container*/
    background-position: 50% 50%; /* to center the image */
    width: 640px;
    height: 320px;
}

@media (max-width: 544px) {
    .image-item { width: 100%; }
}

如果这不是您的选项，我会将图像置于绝对位置：

<强> HTML：

<div class="container">
    <div class="image-wrapper">
        <img alt="testing" src="http://i1.tribune.com.pk/wp-content/uploads/2013/06/562140-BillGatesAFP-1371012273-193-640x480.jpg" class="img-rounded banner-img">
    </div>
</div>

<强> CSS：

.image-wrapper {
    width: 640px;
    height: 320px;
    overflow: hidden;
    position: relative;
}
.image-wrapper > .banner-img {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%); /* to center it again */
}

@media (max-width: 544px) {
    .image-wrapper { width: 100%; }
}

移动与大图像大小

3 个答案: