表太长，背景图像在不同的分辨率 [英] Table too long for background image at different resolutions

问题描述

已解决：多个背景彼此（普通，拉伸，正常）

我目前在一个学校项目的网站上工作，我面临着不同的问题屏幕分辨率。我的网站在正常分辨率的15.6笔记本电脑上看起来不错，但是当我开始缩小时，居中的表格元素对于背景图像来说太长了，因为它具有固定的大小并且不能随桌子拉伸。我的第一个想法是将背景图像分成3个部分，只拉伸到中间部分。是否有人有更优雅的解决方案，如果没有，想知道如何用HTML实现这个？

I am currently working on a website for a school project and I'm facing issues with different screen resolutions. My website looks good on my 15.6" laptop at normal resolution, but as soon as I start zooming out, the centered table element gets too long for the background image, since it has a fixed size and cannot strech with the table. My first thought was splitting the background image into 3 parts and streching only the middle one. Does anybody have a more elegant solution and if not, an idea of how to realize this in HTML?

正常： http://www11.pic-upload.de/26.12.14 /opay2lxe63et.png

缩小： http://www11.pic-upload.de/26.12.14/cnrvvumqfcm.png

HTML：

<div id="content">
<table>
<colgroup>
    <col width="100">
    <col width="300">
    <col width="200">
</colgroup>
<tr>
    <td><b>Episode</b></td>
    <td><b>Title</b></td>
    <td><b>Available Hoster</b></td>
</tr><tr>
    <td>01</td>
    <td>Rebirth</td>
    <td>-</td>
</tr><tr>
    <td>02</td>
    <td>Confrontation</td>
    <td>-</td>
</tr><tr>
    <td>36</td>
    <td>January 28</td>
    <td>-</td>
</tr><tr>
    <td>37</td>
    <td>New World</td>
    <td>-</td>
</tr></table></div>

CSS：

#content{
    width: 1024px;
    height: 950px;
    background: url(img/content_background.png) no-repeat;
    display: table-cell;
    vertical-align: middle;
}

#content table{
    border-collapse:collapse;
    color: white;
    margin: auto;
}

#content td{
    border: 1px solid white;
    text-align: center;
}

推荐答案

请使用 background-size：100％; 在你的css中

这篇关于表太长，背景图像在不同的分辨率的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！