个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在尝试在一页上制作 9 个图像，每个图像占据宽度和高度的33%。请帮忙，我正在尝试制作一个电话界面。
@font-face {
font-family: font;
src: url("font.ttf") format("truetype");
}
body {
font-family:font;
}
img {
height:30vh;
}
.row {
width:100vw;
} <body>
<center>
<div class="row">
<a href="#"><img src="https://drive.google.com/uc?id=1hG6SSx5EVBlRwPz_MZ3m6W7Dt8XfbGOv" height="30"></a>
<a href="#"><img src="https://drive.google.com/uc?id=1hG6SSx5EVBlRwPz_MZ3m6W7Dt8XfbGOv" height="30"></a>
<a href="#"><img src="https://drive.google.com/uc?id=1hG6SSx5EVBlRwPz_MZ3m6W7Dt8XfbGOv" height="30"></a>
</div>
<div class="row">
<a href="#"><img src="https://drive.google.com/uc?id=1hG6SSx5EVBlRwPz_MZ3m6W7Dt8XfbGOv" height="30"></a>
<a href="#"><img src="https://drive.google.com/uc?id=1hG6SSx5EVBlRwPz_MZ3m6W7Dt8XfbGOv" height="30"></a>
<a href="#"><img src="https://drive.google.com/uc?id=1hG6SSx5EVBlRwPz_MZ3m6W7Dt8XfbGOv" height="30"></a>
</div>
<div class="row">
<a href="#"><img src="https://drive.google.com/uc?id=1hG6SSx5EVBlRwPz_MZ3m6W7Dt8XfbGOv" height="30"></a>
<a href="#"><img src="https://drive.google.com/uc?id=1hG6SSx5EVBlRwPz_MZ3m6W7Dt8XfbGOv" height="30"></a>
<a href="#"><img src="https://drive.google.com/uc?id=1hG6SSx5EVBlRwPz_MZ3m6W7Dt8XfbGOv" height="30"></a>
</div>
</body>最佳答案
使用 CSS 网格创建 3x3 网格非常简单。
与图像相比，使用 width 和 max-height
*{margin:0;box-sizing:border-box}html,body{min-height:100%;}
#images {
height: 100vh;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}
#images img{
display: block;
width: 100%;
max-height: 100%;
object-fit:cover;
}<div id="images">
<a href="music.html"><img src="http://placehold.it/300x300/0bf/fff?text=1"></a>
<a href="music.html"><img src="http://placehold.it/300x300/f0b/fff?text=2"></a>
<a href="music.html"><img src="http://placehold.it/300x300/bf0/fff?text=3"></a>
<a href="music.html"><img src="http://placehold.it/300x300/fb0/fff?text=4"></a>
<a href="music.html"><img src="http://placehold.it/300x300/0fb/fff?text=5"></a>
<a href="music.html"><img src="http://placehold.it/300x300/b0f/fff?text=6"></a>
<a href="music.html"><img src="http://placehold.it/300x300/bbf/fff?text=7"></a>
<a href="music.html"><img src="http://placehold.it/300x300/bfb/fff?text=8"></a>
<a href="music.html"><img src="http://placehold.it/300x300/0bf/fff?text=9"></a>
</div>关于javascript - 如何使图像占据页面的一定百分比并相应地更改大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55091572/
24
4
0
我的函数概念上都返回相同的东西，但结果可以采用不同的形式: function GetThingy() 有四个不同的函数，每个可以返回不同的东西: 0.071(代表增长 7.1% 的 float 值)
这个问题在这里已经有了答案: Int division: Why is the result of 1/3 == 0? (19 个回答) 关闭 4 年前。 有什么方法可以计算(例如)120 的 50
我四处寻找这个，它看起来很简单，但我无法让它工作。 我有一张表格，其中一列需要格式化为百分比。下面是我的代码，但它没有格式化单元格，它只是将它们保留为小数。 我想这是因为 cell ，即使声明为范围，
我刚刚开始使用 WPF。从那以后，我开始关注造型系统。我来自 CSS 背景，我想以百分比设置边距。 当前值以像素为单位
我有一个表，其中每一行都有一个描述字段和一个 bool 值。我正在尝试编写一个查询，我可以在其中按每个相应的描述进行分组，并查看 bool 值为真的次数百分比。 示例表: PID Gen
我从文档中发现，考虑到 orientdb 100% 使用磁盘缓存，它使用的最大大小为 70% 用于读取缓存，30% 用于写入缓存 ( http://orientdb.com/docs/last/plo
有什么方法可以获取 docker 容器内部而不是外部的 cpu 百分比吗？! docker stats DOCKER_ID 显示的百分比正是我需要的，但我需要它作为变量。我需要获取容器本身内部的 cp
我正在尝试计算数据集每列中类别的比例(百分比)。 示例数据: df <- data.frame( "Size" = c("Y","N","N","Y","Y"), "Type" =
我应该使用小数还是 float 在数据库中存储比率？特别是在 SQL2005 中。 最佳答案 这取决于您对准确性的需求。如果您可以容忍来自存储 float 的 IEEE 方法的典型错误，则使用 flo
我正在创建一个游戏，目前必须处理一些math.random问题。 我的Lua能力不是那么强，你觉得怎么样 您能制定一个使用 math.random 和给定百分比的算法吗？ 我的意思是这样的函数: fu
如何在SQL中动态计算百分比？ 假设您有一个名为 Classes 的下表: ClassSession StudentName -------------------------------
如何通过 jQuery 创建具有百分比的数字掩码输入？我是否让输入仅接受三个数字，并在用户完成输入时在数字后添加百分号(keyup)？ 我不使用插件。 示例:1% 或 30% 或 99% 或 100%
我正在尝试构建一个工具，可以突出显示具有最高介数中心性的社交网络节点。我将所有网络节点的测量值计算到字典中，按顺序对字典进行排序，然后仅保留前 3 对。 我希望这个工具是可扩展的，所以我想保留前 10
MYSQL 中的人员如何将一个日期条目和分数的用户百分比与另一个日期条目和分数进行比较，从而有效地返回从一个日期到另一个日期的用户百分比增加情况？ 几天来我一直在试图解决这个问题，但我已经没有想法了，
我需要进行查询，结果是百分比。 我现在的查询如下所示: select COUNT(CREATE_WEEKDAY), CREATE_WEEKDAY, COUNT(CREATE
我有一个图像上传功能，其工作原理如下: $('.update-insertimage-form').submit(function() { $(".submit-newupdate-btn").add
我的问题很简单，但我仍然找不到这个问题的答案... 假设我们有两个包含图像的容器。 我们有类似的东西 #containera { width: 50%; height: 50%; backgr
是否可以将 CSS 尺寸指定为除其父元素之外的另一个元素的百分比？例如，我想将 div 的 border-radius 指定为 div 宽度的 10%。但是，border-radius: 10% 在
我正在尝试设置按钮的大小并以百分比进行编辑 但是这个的线性大小是不同的。为什么？ 最佳答案 您好，问题出在属性 box-sizing 上.默认为 input type
我将它用于我的页眉，该页眉在一页上下滚动页面中发生变化。我注意到它没有响应，所以我想问你是否知道一种使它响应的方法。就像将 0-690 更改为百分比，以便它可以在移动设备和电视屏幕上使用。 HTML
我是一名优秀的程序员,十分优秀！