Question

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 <div class="card" style="height: 20em;width: 17em;">
        <div style="height:17em;width:17em;background-color: #5f5f5f">
            <img class="card-img-top" src="http://haulihuvila.com/wp-content/uploads/2012/09/hauli-huvila-campgrounds-lg.jpg">
        </div>
        <div class="card-body">
            <h3 class="card-title">help me</h3>
            <a href="#" class="btn btn-primary">More Info</a>
        </div>
    </div>

＆＃13;

如何将图像调整为div的大小。我已经尝试过给img一个最大宽度为100％，最大高度为100％的类。

Answer 1

通过给出max-height和max-width，图像正在调整大小，添加你的css ..以查看是否有阻塞这些属性的东西

＆＃13;

.card-img-top{
  max-width:100%;
  max-height:100%;
}

＆＃13;

<div class="card" style="height: 20em;width: 17em;">
    <div style="height:17em;width:17em;background-color: #5f5f5f">
        <img class="card-img-top" src="http://haulihuvila.com/wp-content/uploads/2012/09/hauli-huvila-campgrounds-lg.jpg">
    </div>
    <div class="card-body">
        <h3 class="card-title">help me</h3>
        <a href="#" class="btn btn-primary">More Info</a>
    </div>
</div

＆＃13;

Answer 2

如果您想将图片放入div中，请使用background-image代替<img>

Stack Snippet

＆＃13;

.bg {
  background-image: url(http://haulihuvila.com/wp-content/uploads/2012/09/hauli-huvila-campgrounds-lg.jpg);
  height: 17em;
  width: 17em;
  background-color: #5f5f5f;
  background-size: cover;
  background-position: center center;
}

＆＃13;

<div class="card" style="height: 20em;width: 17em;">
  <div class="bg"></div>
  <div class="card-body">
    <h3 class="card-title">help me</h3>
    <a href="#" class="btn btn-primary">More Info</a>
  </div>
</div>

＆＃13;

Answer 3

使用Css3 background可让您更好地控制图像格。

String query = "..."
SearchSourceBuilder searchSourceBuilder = new SearchSourceBuilder();
SearchModule searchModule = new SearchModule(Settings.EMPTY, false, Collections.emptyList());
try (XContentParser parser = XContentFactory.xContent(XContentType.JSON).createParser(new NamedXContentRegistry(searchModule
            .getNamedXContents()), query)) {
    searchSourceBuilder.parseXContent(parser);
}

Answer 4

如果你想保留图像的方面，只需在div中设置背景。

HTML

<div class="card" style="height: 20em;width: 17em;">
    <div style="height:17em;width:17em;background-color: #5f5f5f">
        <div class="card-img-top"></div>
    </div>
    <div class="card-body">
        <h3 class="card-title">help me</h3>
        <a href="#" class="btn btn-primary">More Info</a>
    </div>
</div

CSS

.card-img-top {
  background: url('http://haulihuvila.com/wp-content/uploads/2012/09/hauli-huvila-campgrounds-lg.jpg') no-repeat center center;
  background-size: cover;
  width: 100%;
  height: 100%;
}

如何使图像适合特定的div（bootstrap）

4 个答案: