堆栈内存溢出
  简体   繁体   English

父div的图像适合大小

[英]Image fit size of parent div

 原文  2016-02-18 10:37:27  2   4    html/ css/ image/ size

问题描述

I got the following code: 我得到以下代码： 

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body>
<div class="container">
    <div class="crossfade">
        <img src="http://lorempixel.com/400/200/animals/1">
        <img src="http://lorempixel.com/400/200/animals/2">
        <img src="http://lorempixel.com/400/200/animals/3">
        <img src="http://lorempixel.com/400/200/animals/4">
        <img src="http://lorempixel.com/400/200/animals/5">
    </div>
</div>

And the following css (copied from elsewhere Multiple image cross fading in CSS - without (java) script ) 和以下css（从其他地方复制，CSS中的多个图像交叉渐变-不带（java）脚本 ） 

.container
{
width:100px;
 }
.crossfade > img { 
     position: absolute;
     top: 0px;
     left: 0px;
     color: transparent;
     opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 30s linear infinite 0s;
-moz-animation: imageAnimation 30s linear infinite 0s;
-o-animation: imageAnimation 30s linear infinite 0s;
-ms-animation: imageAnimation 30s linear infinite 0s;
animation: imageAnimation 30s linear infinite 0s; 
 }

 .crossfade > img:nth-child(2)  {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s; 
 }
 .crossfade > img:nth-child(3) {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s; 
 }
 .crossfade > img:nth-child(4) {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s; 
 }
 .crossfade > img:nth-child(5) {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s; 
 }

 @-webkit-keyframes imageAnimation { 
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
     -webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
 }

 @-moz-keyframes imageAnimation { 
0% { opacity: 0;
-moz-animation-timing-function: ease-in; }
8% { opacity: 1;
     -moz-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
 }

 @-o-keyframes imageAnimation { 
0% { opacity: 0;
-o-animation-timing-function: ease-in; }
8% { opacity: 1;
     -o-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
 }

 @-ms-keyframes imageAnimation { 
0% { opacity: 0;
-ms-animation-timing-function: ease-in; }
8% { opacity: 1;
     -ms-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
 }

 @keyframes imageAnimation { 
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
     animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
 }

What I want is that the images are resized to the size of the container. 我想要的是将图像调整为容器的大小。

4 个解决方案

解决方案1
 0  2016-02-18 10:40:15

 .container{width:200px;} .container img{width:100%} 
 <body> <div class="container" > <div class="div2"> <img src="http://lorempixel.com/400/200/animals/1"> <img src="http://lorempixel.com/400/200/animals/2"> <img src="http://lorempixel.com/400/200/animals/3"> <img src="http://lorempixel.com/400/200/animals/4"> <img src="http://lorempixel.com/400/200/animals/5"> </div> </div>

try width :100% 尝试width ：100％ 

   .container img {width:100%;}

if you want size according to container then remove div2 check snippet 如果您想要根据container大小，请删除div2检查代码段

解决方案2
 0  2016-02-18 10:51:55

If you just want to fill container, you can use: 如果您只想填充容器，则可以使用： 

img{
  width: 100%;
  height: 100%
}

But this solution probably will not keep aspect ratio. 但是此解决方案可能无法保持纵横比。

解决方案3
 0  2016-02-18 10:54:18

If your .container is 200px width and 100px height you will have the following ; 如果您的.container宽度为200px，高度为100px，则将具有以下内容； 

<body>
<div class="container" style="width:200px;height:100px;" >
    <div class="div2">
        <img style="width:100%;height:100%;" src="http://lorempixel.com/400/200/animals/1">
        <img style="width:100%;height:100%;" src="http://lorempixel.com/400/200/animals/2">
        <img style="width:100%;height:100%;" src="http://lorempixel.com/400/200/animals/3">
        <img style="width:100%;height:100%;" src="http://lorempixel.com/400/200/animals/4">
        <img style="width:100%;height:100%;" src="http://lorempixel.com/400/200/animals/5">
    </div>
</div>

And if you don't want to use inline css you will need to create a new file, for example style.css and then add a <link> to this file : 而且，如果您不想使用嵌入式CSS，则需要创建一个新文件，例如style.css，然后向该文件添加<link> ： 

<link rel="stylesheet" href="style.css" />
<body>
<div class="container">
    <div class="div2">
        <img src="http://lorempixel.com/400/200/animals/1">
        <img src="http://lorempixel.com/400/200/animals/2">
        <img src="http://lorempixel.com/400/200/animals/3">
        <img src="http://lorempixel.com/400/200/animals/4">
        <img src="http://lorempixel.com/400/200/animals/5">
    </div>
</div>

File style.css (should be in the same folder) 文件style.css（应该在同一文件夹中） 

.container{
    width:200px;
    height:100px;
}
.container .div2 img{
    width:100%;
    height:100%;
}

解决方案4
 0 已采纳  2016-02-18 11:47:13

Here is a suggestion, that deals with different image sizes and kept aspect ratio. 这是一个建议，处理不同的图像尺寸和保持宽高比。

If you resize the browser window, it still plays nicely with all the images. 如果您调整浏览器窗口的大小，它仍然可以很好地播放所有图像。

Updated on request, using 1 container 根据要求使用1个container更新 

 html, body { margin: 0; } .slider { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: #fff; } .slider .image { background-color: #fff; background-position: center center; background-repeat: no-repeat; background-size: contain; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity:0; animation: sliderimagefade 20s 0s infinite; } .slider .image:nth-child(5) { animation-delay: 0s; } .slider .image:nth-child(4) { animation-delay: 4s; } .slider .image:nth-child(3) { animation-delay: 8s; } .slider .image:nth-child(2) { animation-delay: 12s; } .slider .image:nth-child(1) { animation-delay: 16s; } @keyframes sliderimagefade { 0% { opacity:0; } 5% { opacity:1; } 25% { opacity:1; } 30% { opacity:0; } } 
 <div class="slider"> <div class="image" style="background-image: url('http://lorempixel.com/400/200/animals/1')"> </div> <div class="image" style="background-image: url('http://lorempixel.com/400/100/animals/2')"> </div> <div class="image" style="background-image: url('http://lorempixel.com/200/400/animals/3')"> </div> <div class="image" style="background-image: url('http://lorempixel.com/400/200/animals/4')"> </div> <div class="image" style="background-image: url('http://lorempixel.com/300/300/animals/5')"> </div> </div>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使图像适合父div的大小 - Fit image to parent div's size 无法使图像适合图像库中的父 div 大小 - Cannot fit image to parent div size in image gallery 图像大小以适合固定大小的 div - Image size to fit in fixed size div 将任何大小的图像中心对齐到父div - Center fit images of any size to parent div 在图像大小变化的div中适合图像 - fit an image in a div where the image size varies 无论屏幕大小如何，创建适合父母的图像 - Creating image to fit parent regardless of screen size 适合父 div 中背景封面的图像宽度 - fit width of image for background cover in parent div 如何将图像放入父块 div 中？ - How to fit image in parent block div? HTML CSS 图像不适合父 div - HTML CSS image not fit parent div 包含与父级的图像大小<div> - Contain image size with parent <div>
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM