Đổi kích thước theo giá trị cố định bằng cách sử dụng CSS

Question

Tôi đang sử dụng thuộc tính CSS resize:both; để cho phép người dùng thay đổi kích thước nội dung của tôi. Xem mã bên dưới.

.foo { 
 
    resize: both; 
 
    min-width: 250px; 
 
    width: auto; 
 
    text-align: center; 
 
    min-height: 30px; 
 
    border: 1px solid #515151; 
 
    border-radius: 6px; 
 
    position: absolute; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    text-shadow: 1px 1px 1px rgba(0,0,0,0.33); 
 
    box-shadow: 5px 5px rgba(0,0,0, 0.1); 
 
} 
 
.thClass { 
 
    margin-left: -3px; 
 
    text-align: center; 
 
    box-shadow: 0 2px 2px rgba(0,0,0,0.26); 
 
    -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.26); 
 
    -moz-box-shadow: 0 2px 2px rgba(0,0,0,0.26); 
 
    margin-top: -2px; 
 
    min-height: 30px; 
 
    line-height: 30px; 
 
    font-size: 19px; 
 
    cursor: move; 
 
} 
 
.header{ 
 
    margin-left: 17px; 
 
} 
 
.tableBody { 
 
    display: block; 
 
    min-height: 25px; 
 
    text-align: center; 
 
    width: 102%; 
 
    margin-left: -2px; 
 
    cursor: default; 
 
} 
 
.foo tbody tr td { 
 
    display: block; 
 
    line-height: 25px; 
 
    text-align: center; 
 
    border-bottom: 1px solid rgba(0,0,0,0.2); 
 
} 
 
#displaySizes { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin-top: 0; 
 
} 
 
.disp tbody tr th { 
 
    border: 1px solid black; 
 
} 
 
.disp tbody tr td { 
 
    display: table-cell; 
 
}

<table class="foo disp elementTable"> 
 
       <tr class="tableHeader"> 
 
        <th class="thClass" colspan="5"> 
 
         <span class="header">Device</span> 
 
        </th> 
 
       </tr> 
 
       <tr> 
 
        <td rowspan="4" id="sizeContainer"> 
 
         <ul id="displaySizes"> 
 
          <li>4:3</li> 
 
          <li>16:9</li> 
 
          <li>Clock</li> 
 
         </ul> 
 
        </td> 
 
        <td>$100</td> 
 
        <td>February</td> 
 
        <td>February</td> 
 
        <td>February</td> 
 
       </tr> 
 
       <tr> 
 
        <td>February</td> 
 
        <td>February</td> 
 
        <td>February</td> 
 
        <td>February</td> 
 
       </tr> 
 
       <tr> 
 
        <td>February</td> 
 
        <td>February</td> 
 
        <td>February</td> 
 
        <td>February</td> 
 
       </tr> 
 
       <tr> 
 
        <td>February</td> 
 
        <td>February</td> 
 
        <td>February</td> 
 
        <td>February</td> 
 
       </tr> 
 
      </table>

Có cách nào để thay đổi kích thước bước bảng này bằng cách sử dụng CSS bước, ví dụ, bằng cách [10,10] pixel? JavaScript cũng OK. Tôi đã tìm kiếm trên web nhưng không thể tìm thấy bất kỳ thứ gì. Đây là cách làm việc fiddle để bạn có thể chơi với mã.

Answer 1

Đó là một điểm tốt, Vì vậy, Có thể sử dụng css-element-queries Thư viện, Tất cả bạn phải đang tạo ra một ResizeSensor() cho bảng của bạn và sau đó hãy tính toán để đặt cả chiều cao và thay đổi phạm vi rộng:

Xem dưới đây Snippet:

var width = $('.elementTable').width(); 
 
var height = $('.elementTable').height(); 
 
var changePX = 50; 
 

 

 
new ResizeSensor(jQuery('.elementTable'), function(){ 
 

 
    //width calcuation 
 
    if(Math.abs($('.elementTable').width()-width) > changePX) { 
 
     $('.elementTable').width() > width ? width +=changePX : width -=changePX; 
 
    } 
 
    $('.elementTable').width(width); 
 
    
 
    //height calcuation 
 
    if(Math.abs($('.elementTable').height()-height) > changePX) { 
 
     $('.elementTable').height() > height ? height +=changePX : height -=changePX; 
 
    } 
 
    $('.elementTable').height(height); 
 
    
 
})

.foo { 
 
    resize: both; 
 
    min-width: 250px; 
 
    width: auto; 
 
    text-align: center; 
 
    min-height: 30px; 
 
    border: 1px solid #515151; 
 
    border-radius: 6px; 
 
    position: absolute; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    text-shadow: 1px 1px 1px rgba(0,0,0,0.33); 
 
    box-shadow: 5px 5px rgba(0,0,0, 0.1); 
 
} 
 
.thClass { 
 
    margin-left: -3px; 
 
    text-align: center; 
 
    box-shadow: 0 2px 2px rgba(0,0,0,0.26); 
 
    -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.26); 
 
    -moz-box-shadow: 0 2px 2px rgba(0,0,0,0.26); 
 
    margin-top: -2px; 
 
    min-height: 30px; 
 
    line-height: 30px; 
 
    font-size: 19px; 
 
    cursor: move; 
 
} 
 
.header{ 
 
    margin-left: 17px; 
 
} 
 
.tableBody { 
 
    display: block; 
 
    min-height: 25px; 
 
    text-align: center; 
 
    width: 102%; 
 
    margin-left: -2px; 
 
    cursor: default; 
 
} 
 
.foo tbody tr td { 
 
    display: block; 
 
    line-height: 25px; 
 
    text-align: center; 
 
    border-bottom: 1px solid rgba(0,0,0,0.2); 
 
} 
 
#displaySizes { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin-top: 0; 
 
} 
 
.disp tbody tr th { 
 
    border: 1px solid black; 
 
} 
 
.disp tbody tr td { 
 
    display: table-cell; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/css-element-queries/0.4.0/ResizeSensor.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/css-element-queries/0.4.0/ElementQueries.min.js"></script> 
 
<table class="foo disp elementTable"> 
 
       <tr class="tableHeader"> 
 
        <th class="thClass" colspan="5"> 
 
         <span class="header">Device</span> 
 
        </th> 
 
       </tr> 
 
       <tr> 
 
        <td rowspan="4" id="sizeContainer"> 
 
         <ul id="displaySizes"> 
 
          <li>4:3</li> 
 
          <li>16:9</li> 
 
          <li>Clock</li> 
 
         </ul> 
 
        </td> 
 
        <td>$100</td> 
 
        <td>February</td> 
 
        <td>February</td> 
 
        <td>February</td> 
 
       </tr> 
 
       <tr> 
 
        <td>February</td> 
 
        <td>February</td> 
 
        <td>February</td> 
 
        <td>February</td> 
 
       </tr> 
 
       <tr> 
 
        <td>February</td> 
 
        <td>February</td> 
 
        <td>February</td> 
 
        <td>February</td> 
 
       </tr> 
 
       <tr> 
 
        <td>February</td> 
 
        <td>February</td> 
 
        <td>February</td> 
 
        <td>February</td> 
 
       </tr> 
 
      </table>

Answer 2

Dưới đây là một giải pháp tôi đặt lại với nhau rằng sẽ chụp để lưới trao đổi kích thước (Trong ví dụ 20px này.)

Nó sử dụng "cross trình duyệt thay đổi kích thước lý sự kiện", mà một nhà phát triển khác đã đặt lại với nhau (source):

Về cơ bản nó chỉ lắng nghe sự kiện thay đổi kích thước, sau đó thiết lập phong cách cho chiều rộng và chiều cao bằng javascript.

Fiddle ở đây:

https://jsfiddle.net/treetop1500/co8zbatz/

// utility function for rounding (20px in this case) 
function round20(x) 
{ 
    return Math.ceil(x/20)*20; 
} 

// Attach listener 
var myElement = document.getElementById('resize'), 
    myResizeFn = function(){ 
     h = round20(parseInt(this.style.height,10)); 
     w = round20(parseInt(this.style.width,10)); 
     this.style.height = h + "px"; 
     this.style.width = w + "px"; 
    }; 

addResizeListener(myElement, myResizeFn);