javascript - 图片库解决方案

标签 javascript html css

好的,首先,我确信在互联网上有关于此的很好的教程,但我什至无法设法“写下”问题的可能标题,对此我深表歉意。

我喜欢有反应且简单的妆容:

<div class="gallery-container">
    <a href="#"> <img src="/your/image/url.jpg"> </a>
    <a href="#"> <img src="/your/image/url2.jpg"> </a>
    <a href="#"> <img src="/your/image/url3.jpg"> </a>
    ......
</div>

我的问题是:我有不同的宽高比图像来展示所有具有 3:2 宽高比的图像。

一个简单的解决方案是使用 CSS 将图像作为背景插入 a 元素,将其设置为居中包含,然后使用简单的 JS 脚本将高度定义为 75% a 宽度。 我以前使用过这个解决方案,但这次对我不起作用:我需要使用 PHP 动态插入图像。

如何使用 HTML 中声明的图像获得与上述 CSS 技术类似的效果?

更新:像这样:http://jsfiddle.net/fF6GL/ - 但我需要上面的妆容,这种妆容在那种情况下行不通

附言如果可能的话,我想要一个不使用 JS 库的解决方案。

最佳答案

如果您可以将这些链接的图像放入列表中,这可能会起作用:

http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/

关于javascript - 图片库解决方案,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20163379/

相关文章:

html - 如何让我的 html 占据整个浏览器窗口?

css - 更改整个表格的字体大小

javascript - jQuery dataTable 不对新数据进行排序

javascript - 尝试使用 d3.js 快速渲染美国县的矢量 map

javascript - 在 Canvas 中绘制的矩形区域的弹出工具提示

Javascript 从 Json 文件获取图像和按钮下一个和上一个功能

html - 页面加载期间显示的 Angular 验证

javascript - Windows Phone 8 HTML5 应用程序中的 Webfont

javascript - 为所有内容添加一个外部 js 文件?

javascript - Openlayers 5 如何观察 view.center 的变化