在 lg、md sm 和 xs 处引导不同的 img 大小 [英] Bootstrap different img size at lg, md sm and xs

问题描述

如果观看者有智能手机或 PC，我需要更改图像的大小.这实现了我想要的，但这是一种糟糕的方法，因为加载 img 4 次并且它是多余的:

<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"/>

一次只显示一张图片，只有大小不同.如何在没有这种丑陋标记的情况下实现它?可能使用 CSS，为了简单起见，我将图像大小放在 HTML 中.

解决方案

有多种解决方案，具体取决于您要寻找的结果.通过调整结果单元格的大小来尝试 JSFiddle 的行为.

1.使用宽度百分比

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

参见 JSFiddle.

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

如果您想使用之前的解决方案但不希望图像缩放到比原始尺寸更大，您可以使用 max-width 设置一个父级.

参见 JSFiddle.

2.使用断点

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

参见 JSFiddle.

您可以在此处阅读有关媒体查询和响应式 CSS 的更多信息.

如果您不想使用自定义媒体查询大小并且想坚持使用 Bootstrap 特定的断点，则您的 CSS 应该是:

/* xs */图片{宽度:100px；高度:自动；}/* sm */@media(最小宽度:768px){图片{宽度:150px；}}/* MD */@media(最小宽度:992px){图片{宽度:200px；}}/* lg */@media(最小宽度:1200px){图片{宽度:250px；}}

参见 JSFiddle.这些尺寸记录在此处.xs 是默认设置，因为 Bootstrap 3 使用移动优先方法.

I need to make a image change it's size if the viewer has a smartphone or a PC. This achieves what I want but it's a bad way to do it because of loading the img 4 times and it's redundant:

<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>

It displays only one image at once, and only the size differs. How to achieve it without this ugly markup? Possibly with CSS, I put the image sizes in HTML just for simplicity.

解决方案

There are multiple solutions to this, depending on the results you are looking for. Try the JSFiddle's behaviour by resizing the result's cell.

1. Using width percentage

You can set a percentage width to the image so it adapts depending on the size of the screen. This solution may increase the size of the image if the percentage is bigger than the original width, e.g., if the image is 250px wide, and you use width: 50%, and the screen width is 600px, the image will be scaled until it is 300px wide.

See JSFiddle.

1.1 Using width percentage, with fixed width parent

If you want to use the previous solution but don't want the image to scale larger than the original size, you can set a parent with max-width.

See JSFiddle.

2. Using breakpoints

Using CSS3 media queries to change the size of the image depending on the screen's width range.

See JSFiddle.

You can read more about media queries and responsive CSS here.

If you don't want to use custom media query sizes and you want to stick with the Bootstrap-specific breakpoints, your CSS should be:

/* 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;
    }
}

See JSFiddle. These sizes are documented here. xs is the default because Bootstrap 3 uses a mobile-first approach.

这篇关于在 lg、md sm 和 xs 处引导不同的 img 大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！