Question

如果观众有智能手机或PC，我需要让图像改变它的大小。这实现了我想要的，但这是一个糟糕的方法，因为加载img 4次并且它是多余的：

<div class="col-md-4 text-center">
    <img class="hidden-md hidden-sm hidden-xs" src="~/Content/Images/masinaC.png" width="250" height="250" />
    <img class="hidden-lg hidden-sm hidden-xs" src="~/Content/Images/masinaC.png" width="200" height="200" />
    <img class="hidden-lg hidden-md hidden-xs" src="~/Content/Images/masinaC.png" width="150" height="150" />
    <img class="hidden-lg hidden-md hidden-sm" src="~/Content/Images/masinaC.png" width="100" height="100" />
</div>

一次只显示一张图片，只有尺寸不同。没有这个难看的标记如何实现它？可能使用CSS，为了简单起见，我将图像大小放在HTML中。

Answer 1

根据您要查找的结果，有多种解决方案。通过调整结果的单元格来尝试JSFiddle的行为。

1。使用宽度百分比

您可以为图像设置百分比宽度，以便根据屏幕大小进行调整。如果百分比大于原始宽度，此解决方案可能会增加图像的大小，例如，如果图像宽度为250px，并且您使用width: 50%，并且屏幕宽度为600px，则图像将缩放直到它是300px宽。

请参阅JSFiddle。

1.1使用宽度百分比，父级固定宽度

如果您想使用之前的解决方案，但又不希望图片缩放比原始尺寸大，则可以设置父max-width。

请参阅JSFiddle。

2。使用断点

使用CSS3媒体查询根据屏幕的宽度范围更改图像的大小。

请参阅JSFiddle。

您可以阅读有关媒体查询和响应式CSS here的更多信息。

如果您不想使用自定义媒体查询大小，并且您希望坚持使用特定于Bootstrap的断点，那么您的CSS应该是：

/* xs */
img {
    width: 100px;
    height: auto;
}
/* sm */
@media (min-width: 768px) {
    img {
        width: 150px;
    }
}
/* md */
@media (min-width: 992px) {
    img {
        width: 200px;
    }
}
/* lg */
@media (min-width: 1200px) {
    img {
        width: 250px;
    }
}

见JSFiddle。这些尺寸记录在案here。 xs是默认值，因为Bootstrap 3使用mobile-first approach。

Answer 2

不是指定隐藏图像的所有条件，而是更明确，更清晰地指定图像何时可见：

<div class="col-md-4 text-center">
<img class="visible-lg" src="~/Content/Images/masinaC.png" width="250" height="250" />
<img class="visible-md" src="~/Content/Images/masinaC.png" width="200" height="200" />
<img class="visible-sm" src="~/Content/Images/masinaC.png" width="150" height="150" />
<img class="visible-xs" src="~/Content/Images/masinaC.png" width="100" height="100" />

浏览器只会以相关的视口大小显示相关图片，这样您就不必处理媒体查询。

Answer 3

img {
  width: 100%;
}

这将使图像成为其父级的100％。这将相应地改变图像。因此，如果父级是col-md-4，它将占用整个div。所以你可以做到

<div class="col-md-4 col-sm-4 col-xs-4">

  <img src="where ever the image is" alt="what ever">

</div>

如果img设置为100％，则此div中的图像将相对于col-class更改。如果您不希望图像占据整个div而不是相应地调整75％，50％等。

Answer 4

下面是使用<picture>元素和Bootstrap 4的responsive breakpoints的示例：

<picture>
  <source media="(min-width: 1200px)" srcset="/images/xl.png">
  <source  media="(min-width: 992px)" srcset="/images/lg.png">
  <source  media="(min-width: 768px)" srcset="/images/md.png">
  <source  media="(min-width: 576px)" srcset="/images/sm.png">
  <source  media="(max-width: 575px)" srcset="/images/xs.png">
  <img src="/images/default.png" alt="Example Text" style="width:auto;" >
</picture>

使用此选项，浏览器将根据设备的宽度加载单个正确的图像。对于较旧的浏览器，它们只会加载默认的<img>元素。

Answer 5

HTML5有一个新标记<picture>

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

另外，boostrap 4支持<picture>

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>

Answer 6

我也是新手，但不是上面所有复杂的代码，这个简单的代码解决了我的问题。

#logo img {
    max-height: 100%; 
    max-height: 50vh; //50% of user's viewport height
}

如果您想对宽度进行更改，请尝试以下操作：

#logo img {
        max-width: 100%; 
        max-width: 50vw; //50% of user's viewport width
    }

我希望这对其他人也有帮助。

Answer 7

随着HTML5的引入，<picture>元素通常最适合此任务。它使我们能够准确地为我们选择的尺寸屏幕提供所需的服务： Perfect responsive images: HTML5 and Bootstrap 4

Answer 8

Bootstrap 5 有一个新的断点 XXL，它可能会影响提供的一些解决方案 https://getbootstrap.com/docs/5.0/layout/breakpoints/

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

引导不同的图像大小为lg，md sm和xs

8 个答案:

1。使用宽度百分比

1.1使用宽度百分比，父级固定宽度

2。使用断点