-
图片在固定div组中自适应并撑满div格如何实现(内详)?0
标题可能描述不太清除，这里详细说明：
前置1：图片来源于用户，大小不确定，宽高比不确定
前置2：一块固定的div缩略去显示1-9张图片,外层div格式固定，1-9张图片的格子div划分也固定（9张图片的时候类似九宫格）。
如果我图片按照宽度去等比缩放，溢出的高度通过css overflow:hidden去隐藏，部分图片可以达到效果.宽度既全部压缩，高度只显示部分，无变形。
问题来了：
但是有部分图片因为高度随着适应宽度进行等比缩放，缩放后的高度已经无法撑满显示这张图片的div.就会留白...在显示上比较丑陋，高度层次不齐.个人感觉应该将图片适量扩大到显示这张图片的div高度，再hidden溢出的部分，但是不知道如何实现，衷心求解答！
2013年12月25日 17:32
添加评论
关注(1)
相关推荐
本文将深入探讨如何利用纯JavaScript实现img图片在大小未知的div内自适应显示，并兼容不同浏览器，包括火狐、谷歌和IE6/7/8。 首先，我们来看一下基本的HTML结构，它包含一个div容器和一个img元素： ```html <div ...
在网页设计中，"div宽度自适应布局(左边自适应)"是一种常见的网页布局技术，它主要应用于响应式设计，使得页面在不同设备和屏幕尺寸下都能保持良好的视觉效果。这种布局方式强调左侧内容的宽度根据浏览器窗口大小...
总的来说，CSS+div自适应窗口宽度主要依靠`min-width`, `width`, `float`和百分比单位等属性来实现。通过合理的布局和JavaScript辅助，可以创建出适应不同屏幕尺寸的响应式网页，确保在各种设备上提供良好的用户体验...
在实现DIV层自适应高度后，我们还需要实现DIV层的自适应宽度。我们可以使用以下代码来实现DIV层的自适应宽度： ``` function autoWidth(){ var nowWidth = document.documentElement.clientWidth; document....
在网页设计中，"div宽度自适应布局(右边自适应)"是一种常见的网页布局技术，它主要涉及CSS（层叠样式表）的运用，使网页内容能够根据不同的屏幕尺寸和设备进行适配，尤其是针对响应式设计。在这个布局模式下，通常...
在网页设计与开发过程中，经常需要将某个`div`元素的背景设置为全屏显示，并且能够根据不同的屏幕尺寸进行自适应调整。这种技术被称为“div背景全屏自适应”。通过合理地设置CSS样式，可以使背景图像无论在何种...
本篇文章将深入探讨`div`的一些进阶效果，包括圆角`div`、自适应宽度、背景色渐变、多行自适应高度以及固定高度与内容自动变高等CSS技术。 首先，让我们关注圆角`div`。CSS3引入了`border-radius`属性，使得我们...
在网页设计中，让固定大小的`div`自适应显示图片是一项常见的需求。这涉及到CSS布局、图片响应式处理以及JavaScript的应用。以下是对这个主题的详细解析。 首先，`div`是HTML中的一个块级元素，可以用来组织网页...
在网页设计中，有时我们需要实现一个功能：当用户将鼠标悬停在某个div元素上时，显示特定的信息或另一个div。这个功能可以增强用户体验，帮助用户更好地理解和操作页面。本教程将详细介绍如何实现这一功能，并确保...
本文将深入探讨如何利用`div+css`技术实现高度自适应，并通过具体的代码示例来帮助读者更好地理解和应用这一技巧。 #### 二、基础知识回顾 在开始之前，我们先简单回顾一下`div`和`css`的基础概念： 1. **HTML中...
本知识点主要围绕"div+css模板布局 右侧固定，左侧自适应"这一主题展开。 在这样的布局模式中，右侧通常设置为一个固定宽度的区域，无论浏览器窗口大小如何变化，其宽度始终保持不变，常见于侧边栏、导航菜单等元素...
此外，为了使图片在容器中居中显示，还需要设置合适的`margin-top`值。 #### 具体步骤 1. **引入Jquery库** 首先确保项目中已经引入了Jquery库。如果没有，可以通过CDN的方式引入： ```html ...
在网页设计中，图片自适应大小是一个常见的需求，特别是在响应式布局中，为了确保不同设备和屏幕尺寸下的视觉效果，我们需要让图片能够根据其容器（如div）的大小自动调整。本文将详细介绍如何使用纯JavaScript实现...
div+css高度自适应网页布局，子div含float，父div高度自适应，已经通过测试的浏览器：ie6、ie7、ie8、火狐、Chrome。 代码来源： http://www.positioniseverything.net/articles/onetruelayout/equalheight
html div 自适应剧中 上下左右全部居中
在网页设计与开发中，控制元素的布局和尺寸是一项基本且关键的任务。有时，我们可能遇到这样的需求：希望外部的`<div>`容器保持固定的宽度，而不受内部`<div>`或其他子元素尺寸的影响。这在创建响应式设计、固定宽度...
div+CSS自适应高度，需要的朋友请下载
本文将详细介绍如何使用CSS来实现div宽度根据内容自适应。 首先，我们需要理解默认情况下，div元素作为块级元素，它的宽度会占据父元素的整个宽度，除非显式设置了宽度值。因此，如果希望div宽度自适应内容，我们...
至于中间内容的自适应布局，我们可以使用`<section>`作为主要容器，并设置`margin`来创建上下两个固定元素之间的间距，同时利用`max-width`控制内容的宽度，确保在不同屏幕尺寸下都能良好展示： ```css section { ...
综合以上信息，我们可以了解到，通过合理利用CSS的定位属性和尺寸控制，可以实现背景图片在不同分辨率下的自适应和全屏显示。这对于网页设计师来说是一个非常有用的技巧，能够帮助他们创建更具吸引力和用户体验的...