如何使图像占据页面的一部分，并相应地更改大小？
[英]How Do I Make An Image Take Up A Percent Of A Page, and Change Size Accordingly?
问题描述
I'm trying to make 9 images to fit on one pages, each taking up 33% of the width and height . 
我正在尝试制作9张图像以适合一页，每张图像占据width和height 33% 。 Please help, i'm trying to make a phone interface. 请帮助，我正在尝试建立电话界面。
@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>
3 个解决方案
解决方案1
1 2019-03-10 19:57:55
Using CSS grid is quite simple to create a 3x3 grid. 使用CSS网格创建3x3网格非常简单。
Than for the images a bit of trickery is needed using width and max-height 对于图像，使用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>
解决方案2
0 2019-03-10 20:36:25
Try something like this. 尝试这样的事情。
Instead of image tags, I have div's with a background-image, in that way, the images do not get skewed. 代替图像标签，我使用了带有背景图像的div，这样，图像就不会歪斜。
body { height: 100vh; width: 100vw; margin: 0; } .cat { background-image: url(https://placekitten.com/300/300); height: 100%; width: 33.33333%; float: left; background-size: cover; background-position: center; } .row { width: 100%; height: 33.33333%; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div class="row"> <a href="music.html"><div class="cat"></div></a> <a href="music.html"><div class="cat"></div></a> <a href="music.html"><div class="cat"></div></a> </div> <div class="row"> <a href="music.html"><div class="cat"></div></a> <a href="music.html"><div class="cat"></div></a> <a href="music.html"><div class="cat"></div></a> </div> <div class="row"> <a href="music.html"><div class="cat"></div></a> <a href="music.html"><div class="cat"></div></a> <a href="music.html"><div class="cat"></div></a> </div> </body> </html>
解决方案3
0 2019-03-10 22:12:43
Is this what you want? 这是你想要的吗？
@font-face { font-family: font; src: url("font.ttf") format("truetype"); } body { font-family:font; } img { height:30vh; width:30vw } .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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何从用户那里获取颜色输入并相应地更改 WIX 元素的颜色？ - How do I take color Input from users and change color of WIX elements accordingly?
如何使背景图片占据整页 - how can I make the background image take the full page
如何使图像高度在固定大小的容器中根据其下面的内容大小进行调整 - How to make an image height resize accordingly to the size of the contents below it, in a fixed size container
如何使用输入标签更改 html 页面的字体大小 - How do I change Font size of the html page with an input tag
如何使Polymer元素占据页面上的所有垂直空间？ - How can I make a Polymer element take up all vertical space on the page?
我如何将图像放在表格之外并使其尺寸相同？ - How do i put the image besides the form and make it same size?
如何在javascript中更改主体背景图片大小？ - how do i change body background image size in javascript?
如何使用磁通滑块更改图像大小 - How do I Change image size using flux slider
如何将网页上的图像大小加倍？ - How do I double the size of an image on a web page?
如何让网页只显示一次？ - How do I make a web page show up only once?
相关标签