更改具有一定大小的图像的样式

Question

我如何使用css更改其大小超过一定大小的图片大小。例如，如何更改宽度超过300像素的照片外观。

Answer 1

使用图片的一些基本信息：

http://www.w3schools.com/w3css/w3css_images.asp

调整图像大小的一些可能方法：

通过css设置图像样式：

img {
  width:200%;
}

或者使用内联css

<img style="width:500px;" src="..."/>

或使用HTML属性

<img width="30px" height="auto" src="..."/>

如此处所示，您也可以使用不同类型的单位。 px，%，em，rem，vw＆amp; vh是可用的。

媒体查询

如果要根据页面大小应用不同的样式，请使用media queries。

依赖于图像大小的样式

如果您想根据图片的来源尺寸对图片应用不同的样式，我认为您运气不好。您可以使用javascript来执行此操作，但据我所知，没有纯CSS解决方案。

Nota Bene

但应该注意的是，你的问题引起了人们的怀疑，即你甚至不打扰谷歌搜索，因为这是绝对基本的 HTML / CSS。

Answer 2

您可以使用min宽度/高度和max宽度/高度：

示例：

p {
  max-width: 100px;
}

如果您想要更多控制权，可以使用media：

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers">
</picture>