在前端固定宽高的div里不变形并尽可能实现主要内容，可以采取以下方法：

1. 使用百分比布局：使用百分比布局，可以使得元素在不同的设备和屏幕尺寸上都能保持良好的比例。

2. 使用CSS flexbox：CSS flexbox是一种灵活的布局方式，可以让你更方便地控制元素的排列方式。

3. 使用CSS grid：CSS grid也是一种灵活的布局方式，可以让你更方便地控制元素的排列方式。

4. 使用JavaScript：如果你需要在移动端使用，可以使用JavaScript来监听用户的触摸事件，然后根据用户的触摸行为来调整div的宽度。

以下是一个使用CSS flexbox的示例：

HTML代码：

```html

```

CSS代码：

```css .container { display: flex; flex-wrap: wrap; justify-content: space-between; }

.item { flex: 1; box-sizing: border-box; } ```

在这个示例中，.container的display属性被设置为flex，这样容器就会自动换行，而且.item的flex属性被设置为1，这样每个.item就会占据容器的一半空间。flex-wrap: wrap;的设置使得.item可以在容器内无限滚动。justify-content: space-between;的设置使得每个.item之间的间距不会被拉伸。

你可以根据自己的需求来调整CSS代码，例如调整.item的flex和box-sizing属性，或者使用JavaScript来监听触摸事件。