图片自适应容器 css_在CSS中创建自适应HTML容器

图片自适应容器 css

With the increasing use of smartphones and tablets, the demand and benefits of responsive web designs are an ever increasing importance. A responsive web design means a design that works flexibly on a wide-variety of screen resolutions, from smartphones all the way to desktop computers – all from one codebase, so to speak.

随着智能手机和平板电脑的使用越来越多，响应式网页设计的需求和利益变得越来越重要。 响应式Web设计是指一种设计，可以在各种屏幕分辨率上灵活地工作，从智能手机一直到台式计算机-可以说，所有这些都来自一个代码库。

As a web developer, you might be curious to learn how responsive designs can be created. Thankfully, the learning curve isn’t complicated at all. In fact, there are many responsive design frameworks you can use to help you, too. A popular free design framework called Bootstrap, released under an MIT license, is a favourite among many developers and is a great option to consider if you need to design a fully-responsive website from scratch.

作为Web开发人员，您可能想知道如何创建响应式设计。 幸运的是，学习曲线一点也不复杂。 实际上，您也可以使用许多响应式设计框架来帮助您。 一个流行的免费设计框架Bootstrap是在MIT许可下发布的，它是许多开发人员所喜欢的，并且是考虑是否需要从头开始设计一个完全响应的网站的绝佳选择。

For the purposes of this article, we’ll be showing you how to create a grid of containers that are flexible and respond dynamically to the available horizontal space. No JavaScript is needed. View the demo here (right click on the page for the full source code).

出于本文的目的，我们将向您展示如何创建一个灵活的容器网格并动态响应可用的水平空间。 不需要JavaScript。 在此处查看演示(右键单击页面以获取完整的源代码)。

HTML:

HTML：

<div>Container 1</div>

<div>容器1 </ div>

<div>Container 2</div>

<div>容器2 </ div>

<div>Container 3</div>

<div>容器3 </ div>

<img src=”google.png” alt=“Google”>

<img src =” google.png” alt =“ Google”>

CSS:

CSS：

div { … float: left; width: 33.333%; height: 100px; … }

div {…float：left; 宽度：33.333％; 高度：100px； …}

@media screen and (max-width: 800px) { div { … float: none; width: 100%; … } }

@media屏幕和(最大宽度：800像素){div {…float：无； 宽度：100％; …}}

img { width: 100%; max-width: 800px; max-height: 290px; }

img {宽度：100％; 最大宽度：800px； 最大高度：290px； }

As you can see, we have three equally-sized containers that are either floated or stacked depending on the available horizontal space. If the viewport width is 800 pixels or less, the containers become stacked at 100% width; ideal for smartphones where horizontal space becomes a major issue. The “@media screen and (min-width: 800px)” is a media query. It allows specific CSS code to be limited to certain types of devices or resolutions. Media queries are not supported in IE 8 and earlier; to support older browsers, you’ll need to use a JavaScript library such as Respond.js.

如您所见，我们有三个大小相等的容器，它们根据可用的水平空间浮动或堆叠。 如果视口宽度为800像素或更小，则容器将以100％的宽度堆叠；否则，容器将以100％的宽度堆叠。 最适合水平空间成为主要问题的智能手机。 “ @media屏幕和(最小宽度：800像素)”是一种媒体查询 。 它允许将特定CSS代码限制为某些类型的设备或分辨率。 IE 8及更早版本不支持媒体查询。 为了支持较旧的浏览器，您需要使用JavaScript库，例如Respond.js 。

Responsiveness isn’t just limited to HTML containers; you can also do the same for images, too. It simply involves specifying the maximum height of an image and setting the width to 100%. Specifying a maximum width prevents potential image stretching on large resolutions.

响应能力不仅限于HTML容器； 您也可以对图像执行相同的操作。 它仅涉及指定图像的最大高度并将宽度设置为100％。 指定最大宽度可防止潜在的图像在高分辨率下拉伸。

And that’s all there is to it. Of course this is just a basic example, but it gives you a starting point to creating responsive designs that scale regardless the device it is viewed on.

这就是全部。 当然，这只是一个基本示例，但它为您创建响应式设计提供了一个起点，无论在何种设备上查看，该设计都可以扩展。

翻译自: https://www.eukhost.com/blog/webhosting/creating-responsive-html-containers-css/

图片自适应容器 css