Question

我试图使图像适合div而不管图像大小如何，但是当上传不同大小的图像时，图像不适合或与更大尺寸的其他图像匹配。

HTML：

<div class="wrapper">
<div id="one">
<a  href="http://ironware.in/product-category/faucets/" style="    text-decoration: none;"><img  class="imagewidth" src="http://mangoesandmiles.com/wp-content/uploads/2015/07/grohe-bathroom-faucets-SGjy.jpg"/>
<br>
<h3 class="imagewidth"  id="h11" style="padding: 9px; text-align:center;">Bathroom Facets</h3>
</a>
</div>
<div id="one">
<a    href="http://ironware.in/product-category/faucets/" style="    text-decoration: none;"><img  class="imagewidth" src="http://www.vinodpatel.com.fj/media/catalog/category/paint_swatches.jpg"/>
<br>
<h3 class="imagewidth"  id="h11" style="padding: 9px; text-align:center;">Bathroom </h3>
</a>
</div>
<div id="one">
<a    href="http://ironware.in/product-category/faucets/" style="    text-decoration: none;"><img class="imagewidth" src="http://mangoesandmiles.com/wp-content/uploads/2015/07/grohe-bathroom-faucets-SGjy.jpg"/>
<br>
<h3 class="imagewidth"  id="h11" style="padding: 9px; text-align:center;"> Facets</h3>
</a>
</div>
</div>

CSS：

.wrapper div {

            width: 100%;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            padding-bottom: 8%;
            }

            @media screen and (min-width: 600px) {
            .wrapper {
            height: auto;
            }
            #one {
            width: 33.3333%;
            float: left;

            }

            }



            #one:hover h3 {



            transition: border-color .5s ease-in-out;
            cursor: pointer;

            color:#ff0000; 
            border-bottom-color: #ff0000;

            }





            #one h3 {

            color:#000000; 
            border-bottom: 2px solid #e7e4da;
            }




            .imagewidth
            {
            width: 98.5%;
            max-width: 100%
            }

            .headding_line
            {
            width: 50px;
            margin-top: 0px;
            margin-bottom: 30px;
            border-top: 2px solid #e7e4da;
            }

Answer 1

嗨@Pauli首先，我努力实现你想要的目标

图像高度的一个方面是通过自己的宽度来调整。

如果你想要特定的高度，那么你需要指定apply。

请查看它是否适合您

.wrapperdiv{
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-bottom: 8%;
}
.one{
    max-width:40%;    
}
.one img{
    max-width:40%;
    max-height:auto;
    display:block;
}
.one h3{
    max-width : 40%;
}
@mediascreenand (min-width: 600px){
	.wrapper{
		height: auto;
	}.one{
		width: 33.3333%;
		float: left;
	}
}
.one:hover h3{
	transition: border-color .5s ease-in-out;
	cursor: pointer;
	color: #ff0000;
	border-bottom-color: #ff0000;
}
.one{
    max-width:70%;    
}
.one img{
    max-width:70%;
    max-height:auto;
    display:block;
}
.one h3{
    max-width:70%;
	color: #000000;
	border-bottom: 2px solid #e7e4da;
}
.headding_line{
	width: 50px;
	margin-top: 0px;
	margin-bottom: 30px;
	border-top: 2px solid #e7e4da;
}

<div class="wrapper">
    <div class="one">
        <a  href="http://ironware.in/product-category/faucets/" style="    text-decoration: none;">
            <img  class="imagewidth" src="http://3.s3.envato.com/files/17065809/1_skywalker-template-preview.__large_preview.png"/><br>
            <h3 class="imagewidth"  id="h11" style="padding: 9px; text-align:center;">Bathroom Facets</h3>
        </a>
    </div>
    <div class="one">
        <a    href="http://ironware.in/product-category/faucets/" style="    text-decoration: none;">
            <img  class="imagewidth" src="http://www.ahrefmagazine.com/wp-content/uploads/2013/03/thrill.jpg"/><br>
            <h3 class="imagewidth"  id="h11" style="padding: 9px; text-align:center;">Bathroom </h3>
        </a>
    </div>
    <div class="one">
        <a    href="http://ironware.in/product-category/faucets/" style="    text-decoration: none;">
            <img class="imagewidth" src="http://www.ahrefmagazine.com/wp-content/uploads/2013/03/jscover_thumb.jpg"/><br>
            <h3 class="imagewidth"  id="h11" style="padding: 9px; text-align:center;"> Facets</h3>
        </a>
    </div>
</div>

并且有一件事我真的想建议当你提出这个问题时，请在js小提琴中应用适当的代码结构，或者在哪里给出代码导致一件事是人们只会回答他们是否必须尽量减少努力理解并找到问题。

无论是否有效，

都必须提供反馈

Answer 2

有很多html / css问题，比如重复的id。你将来会遇到其他问题，所以你知道。但由于它们不是你提问的原因，我不会进入它们。

由于您为元素使用了width: 33%，因此您可以提供图像height: 33vw，这意味着高度等于视口宽度的33％。注意：这会拉伸我们的图片example

如果您想要填充图片，则需要添加另一个容器div：example

调整大小，Div中的任何大小的图像

2 个答案: