Question

http://protected-river-1861.herokuapp.com/链接。

当进行搜索时，所有结果都会以不同的大小返回，所有结果都聚集在一起，通常看起来很破旧。请注意，我是一个完整的初学者，我没有参加任何课程，只是一个（新的）爱好。

有人能指出我正确的方向让它们看起来更好（大小均匀，它们之间的空格，边框，阴影等）？

<input id="search-term" type="text">
<button id="go-search"></button>
<div id="search-results"></div>
<div style="width: 150px; margin:0 auto;">
    <div id="branding"></div>

CSS：

function findImagesOnGoogle(options) {  
$(options.container).empty();
$(options.container).append($("<p>").text("Searching..."));

var imageSearch = new google.search.ImageSearch();
imageSearch.setSearchCompleteCallback(this, function() {
google.search.Search.getBranding('branding');
$(options.container).empty();
for (var i = 0; i < imageSearch.results.length; i++) {
  var result = imageSearch.results[i];      
  var img = $("<img>");
  img.attr('src', result.tbUrl);
  img.data('url', result.url);
  img.appendTo(options.container);
  }
  }, null);
  imageSearch.setResultSetSize(8);
  imageSearch.execute(options.keywords);  
}

谢谢。

Answer 1

您可以使用以下CSS修复图像大小，应用边框并添加填充以将它们分开：

#search_results img{
    border:1px solid blue;
    height:100px;
    width:100px;
}
#search_results img:not(:last-child){
    padding:0 10px 0 0;
}

考虑到这一点，您可能需要考虑不使用img代码，而是将图片设置为（例如）background-image代码的div，这样您就可以更好地控制缩放他们使用，例如background-size:cover;和/或background-position:center center;

e.g：

变化：

  var img = $("<img>");
  img.attr('src', result.tbUrl);

要：

  var img = $("<div>");
  img.css('background-image', 'url('+result.tbUrl+')');

使用CSS：

#search_results div{
    border:1px solid blue;
    height:100px;
    width:100px;
    background-position:center center;
    background-size:cover;
}
#search_results div:not(:last-child){
    padding:0 10px 0 0;
}

更改图像结果缩略图的外观

1 个答案: