css调整图片大小

css调整图片大小

While you cannot “resize” images in CSS3, you can make them appear to be resized in the browser using media queries and the principles of responsive design.

虽然您无法在CSS3中“调整大小”图像，但可以使用媒体查询和响应式设计原理使它们在浏览器中看起来像是在调整大小。

The idea is to have the image respond to the viewport dimensions to make sure it does not overlap the edge. A maximum width must be defined if the viewport is taller than it is wide, and a maximum height must be defined if the viewport is wider than it is tall.

想法是使图像响应视口尺寸，以确保其不与边缘重叠。 如果视口的高度大于宽度，则必须定义最大宽度；如果视口的宽度大于高度，则必须定义最大高度。

Here is some sample code, and links to more articles on the topic. Note the use of img.ri:empty empty is a structural pseudo-class which only matches elements which have no children (an image should never have any). This is a CSS3 selector so IE8 and below will not parse the declaration.

这是一些示例代码，并链接到有关该主题的更多文章。 请注意，使用img.ri:empty empty是一个结构化的伪类，它仅匹配没有子元素的元素(图像不应有任何子元素)。 这是一个CSS3选择器，因此IE8及以下版本不会解析该声明。

@media screen and (orientation: portrait) { img.ri { max-width: 90%; } } @media screen and (orientation: landscape) { img.ri { max-height: 90%; } }

For more on responsive images, here’s an article with more information on creating responsive centered images, a guide to maintaining image aspect ratios using CSS3 and a complete guide to the background-size property.

有关响应式图像的更多信息，本文是有关创建响应式中心图像的更多信息， 使用CSS3维护图像长宽比的 指南以及background-size属性的完整指南 。

翻译自: https://www.sitepoint.com/resize-images-css/

css调整图片大小

相关资源：html5+css+jquery通过鼠标拖拽来移动对象位置、改变大小、和旋转的实现