如何指定图像大小，以便在iPhone和Android浏览器上扩展到100％宽度？ [英] How do I specify image size so it scales to 100% width on iPhone and android browsers?

问题描述

我正在开发我的第一个移动网站。设计非常简单 - 几乎没有图形。有一个页面允许用户通过邮政编码搜索退休社区。搜索结果页面只是找到的社区列表，其中包含为每个社区打开单个社区页面的链接。

I'm developing my first mobile site. The design is pretty simple - almost no graphics. There's a page that allows users to search for retirement communities by zip code. The search results page is just a list of communities found, with links to open an individual community page for each.

所有工作文件，除了......客户现在想要在该社区的特定页面上显示每个社区的图像。无论用户是以纵向还是横向模式查看，图像都需要跨越整个屏幕宽度，并且需要在iPhone和Android浏览器上以相同的方式工作。

All works file, EXCEPT... the client now wants to feature an image of each community on the specific page for that community. The image needs to span the entire width of the screen, regardless of whether the user is viewing in portrait or landscape mode, and it needs to work the same way on both iPhone and android browsers.

如何指定图像大小以便它以这种方式工作？

How do I specify image size so that it works this way?

编辑添加：我已经有了一个视口标签，但是虽然它正确设置了文本和HTML / css元素的大小，但它对图像没有任何影响。

Edited to add: I do have a viewport tag already, but although it's correctly setting the size of text and HTML/css elements, it's not having any effect on the images.

推荐答案

      <img src="source" width="100%" />

或

     <img src="source" style="width:100%" />

或

 <style>
  .full
  {
  width: 100%;
  }
  </style>
 <img src="source" class="full" />

应该可以胜任;

这篇关于如何指定图像大小，以便在iPhone和Android浏览器上扩展到100％宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！