即使我设置height和width，番茄图片也比其他图片更高。我确信这很简单：
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-4">
<a href="#"><img src="http://i1121.photobucket.com/albums/l514/sterzarino/lightning.jpg" class="img-responsive projects img-thumbnail" width="230" height="230"></a>
<div class="caption text-center">Weather App</div>
</div>
<div class="col-md-4">
<a href="#"><img src="http://i1121.photobucket.com/albums/l514/sterzarino/TomatoClock.jpg" class="img-responsive projects img-thumbnail" width="230" height="230"></a>
<div class="caption text-center">Weather App</div>
</div>
<div class="col-md-4">
<a href="#"><img src="http://i1121.photobucket.com/albums/l514/sterzarino/soup.jpg" class="img-responsive projects img-thumbnail" width="230" height="230"></a>
<div class="caption text-center">Recipe Book</div>
</div>
</div>
</div>
答案 0 :(得分：2)
因为您使用的是.img-responsive和.img-thumbnail，这两者都在CSS中设置max-width:100%，因此会覆盖html width / height代码
另外，请勿使用width / height
要使用相同的height，您可以执行以下操作（不会丢失宽高比）：
.row img {
max-height: 120px
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-4 col-md-4 text-center">
<a href="#">
<img src="http://i1121.photobucket.com/albums/l514/sterzarino/lightning.jpg" class="img-responsive projects img-thumbnail">
</a>
<div class="caption">Weather App</div>
</div>
<div class="col-xs-4 col-md-4 text-center">
<a href="#">
<img src="http://i1121.photobucket.com/albums/l514/sterzarino/TomatoClock.jpg" class="img-responsive projects img-thumbnail">
</a>
<div class="caption">Weather App</div>
</div>
<div class="col-xs-4 col-md-4 text-center">
<a href="#">
<img src="http://i1121.photobucket.com/albums/l514/sterzarino/soup.jpg" class="img-responsive projects img-thumbnail">
</a>
<div class="caption">Recipe Book</div>
</div>
</div>
答案 1 :(得分：1)
在css中设置自定义宽度和高度，以覆盖bootstrap：
.img-thumbnail{
width: 230px;
height:230px;
}
答案 2 :(得分：0)
我认为是bootstrap的反应式图像弄乱了它。像css一样覆盖它
/* splice related functions */
static void rdma_ring_pipe_buf_release(struct pipe_inode_info *pipe,
struct pipe_buffer *buf)
{
put_page(buf->page);
buf->flags &= ~PIPE_BUF_FLAG_LRU;
}
void rdma_ring_spd_release_page(struct splice_pipe_desc *spd, unsigned int i)
{
put_page(spd->pages[i]);
}
static const struct pipe_buf_operations rdma_ring_page_pipe_buf_ops = {
.can_merge = 0,
.map = generic_pipe_buf_map,
.unmap = generic_pipe_buf_unmap,
.confirm = generic_pipe_buf_confirm,
.release = rdma_ring_pipe_buf_release,
.steal = generic_pipe_buf_steal,
.get = generic_pipe_buf_get,
};
/* in order to simplify the caller work, the parameter meanings of ppos, len
* has been changed to adapt the internal ring buffer of the driver. The ppos
* indicate wich page is refferred(shoud start from 1, as the csr page are
* not allowed to do the splice), The len indicate how many pages are needed.
* Also, we constrain that maximum page number for each splice shoud not
* exceed 16 pages, if else, a EINVAL will return. If a high speed device
* need a more big page number, it can rework this routing. The off is also
* used to return the total bytes shoud be transferred, use can compare it
* with the return value to determint whether all bytes has been transfered.
*/
static ssize_t do_rdma_ring_splice_read(struct file *in, loff_t *ppos,
struct pipe_inode_info *pipe, size_t len,
unsigned int flags)
{
struct rdma_ring *priv = to_rdma_ring(in->private_data);
struct rdma_ring_buf *data_buf;
struct rdma_ring_dstatus *dsta_buf;
struct page *pages[PIPE_DEF_BUFFERS];
struct partial_page partial[PIPE_DEF_BUFFERS];
ssize_t total_sz = 0, error;
int i;
unsigned offset;
struct splice_pipe_desc spd = {
.pages = pages,
.partial = partial,
.nr_pages_max = PIPE_DEF_BUFFERS,
.flags = flags,
.ops = &rdma_ring_page_pipe_buf_ops,
.spd_release = rdma_ring_spd_release_page,
};
/* init the spd, currently we omit the packet header, if a control
* is needed, it may be implemented by define a control variable in
* the device struct */
spd.nr_pages = len;
for (i = 0; i < len; i++) {
offset = (unsigned)(*ppos) + i;
data_buf = get_buf(priv, offset);
dsta_buf = get_dsta_buf(priv, offset);
pages[i] = virt_to_page(data_buf);
get_page(pages[i]);
partial[i].offset = 0;
partial[i].len = dsta_buf->bytes_xferred;
total_sz += partial[i].len;
}
error = _splice_to_pipe(pipe, &spd);
/* use the ppos to return the theory total bytes shoud transfer */
*ppos = total_sz;
return error;
}
/* splice read */
static ssize_t rdma_ring_splice_read(struct file *in, loff_t *ppos,
struct pipe_inode_info *pipe, size_t len, unsigned int flags)
{
ssize_t ret;
MY_PRINT("%s: *ppos = %lld, len = %ld\n", __func__, *ppos, (long)len);
if (unlikely(len > PIPE_DEF_BUFFERS))
return -EINVAL;
ret = do_rdma_ring_splice_read(in, ppos, pipe, len, flags);
return ret;
}
答案 3 :(得分：0)
我建议从使用<img>更改为使用图片作为背景。 Bootstrap不是一切，如果看起来不合适，你仍然可以添加自己的样式。
背景很好，因为你可以修剪两端而不会拉伸图像。
.projects.img-thumbnail[style] {
width:100%;
height:200px;
background-size:cover;
background-position: center;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-4">
<a href="#"><span style="background-image: url(http://i1121.photobucket.com/albums/l514/sterzarino/lightning.jpg)" class="img-responsive projects img-thumbnail"></span></a>
<div class="caption text-center">Weather App</div>
</div>
<div class="col-xs-4">
<a href="#"><span style="background-image: url(http://i1121.photobucket.com/albums/l514/sterzarino/TomatoClock.jpg)" class="img-responsive projects img-thumbnail"></span></a>
<div class="caption text-center">Weather App</div>
</div>
<div class="col-xs-4">
<a href="#"><span style="background-image: url(http://i1121.photobucket.com/albums/l514/sterzarino/soup.jpg)" class="img-responsive projects img-thumbnail"></span></a>
<div class="caption text-center">Recipe Book</div>
</div>
</div>
但据我所知，除了涉及::before或::after伪选择器之外，没有简单的方法可以使它成为正方形。