Question

我有一个以设定宽度显示图像的页面。高度是可变的，因此图像保持其纵横比。鼠标悬停时，图像会发生变化，但高度也会变化。如何保持高度和宽度相同，只需让新图像使用最后一个图像的最大高度/最大宽度，这样就不会调整容器的大小。

<style>
li {
    width: 190px;
    border: 1px solid black;
    list-style: none;
}

li img{
    width: 100%;
}
</style>
<body>
    <ul>
        <li onmouseover="clip_1.src='http://3.bp.blogspot.com/-7VguOKQL_1A/TZCZqkhCJ8I/AAAAAAAAAEc/Hcch-vkZBMk/s1600/01_08_52---Duck_web.jpg'" onmouseout="clip_1.src='http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg'">
            <img src="http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg" name="clip_1">      
        </li>
        <li onmouseover="clip_2.src='http://3.bp.blogspot.com/-7VguOKQL_1A/TZCZqkhCJ8I/AAAAAAAAAEc/Hcch-vkZBMk/s1600/01_08_52---Duck_web.jpg'" onmouseout="clip_2.src='http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg'">
            <img src="http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg" name="clip_2">      
        </li>
    </ul>
</body>

Answer 1

你可以尝试这个 - DEMO

$("li")
    .on("mouseover", function() {
        var h = $(this).height();
        $(this).find("img").prop("src", "http://3.bp.blogspot.com/-7VguOKQL_1A/TZCZqkhCJ8I/AAAAAAAAAEc/Hcch-vkZBMk/s1600/01_08_52---Duck_web.jpg");
        $(this).height( h );
})
    .on("mouseout", function() {
        $(this).find("img").prop("src", "http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg");
});

Answer 2

实现此效果不需要JavaScript / jQuery。

只需在css类中定义块元素的背景图片（例如<div />，<span style="display: inline-block" />等），然后更改:hover上的背景图片。

见这里：http://jsfiddle.net/adamb/z3sxc/15/

HTML：

<div class="picture" />

CSS：

.picture {
    background: url(http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg) no-repeat;
    background-size: 190px;
    width: 190px;
    height: 190px;
    border: 1px solid black;
}

.picture:hover {
    background: url(http://3.bp.blogspot.com/-7VguOKQL_1A/TZCZqkhCJ8I/AAAAAAAAAEc/Hcch-vkZBMk/s1600/01_08_52---Duck_web.jpg) no-repeat;   
    background-size: 190px;
}

Answer 3

您可以添加Javascript函数来更改元素上的CSS：

function changeImage() {
    clip_1.style.maxWidth = clip_1.width + 'px';
    clip_1.style.maxHeight = clip_1.height + 'px';
    clip_1.src='http://3.bp.blogspot.com/-7VguOKQL_1A/TZCZqkhCJ8I/AAAAAAAAAEc/Hcch-vkZBMk/s1600/01_08_52---Duck_web.jpg';
}

<li onmouseover="changeImage()" ... />

（Live here）

Answer 4

这可能会让你开始。

我做的第一个调整是用<div>将图像包装成一个通用的CSS类名：

<li onmouseover="clip_1.src='http://3.bp.blogspot.com/-7VguOKQL_1A/TZCZqkhCJ8I/AAAAAAAAAEc/Hcch-vkZBMk/s1600/01_08_52---Duck_web.jpg'" onmouseout="clip_1.src='http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg'">
    <div class="clip">
            <img src="http://animal.discovery.com/guides/wild-birds/gallery/mallard_duck.jpg" name="clip_1">      
       <div>
</li>

然后你可以给那个班级一些有助于调整大小的风格：

.clip {
    overflow: hidden;
}

然后在顶部使用一个小jQuery：

$(function() {
    $('.clip img').load(function() {
        $(this).parent('.clip').css({ 
            width: $(this).width(), 
            height: $(this).height() 
        }); 
        $(this).unbind('load'); // only do this once             
    });            
});

<强> DEMO

更改元素内容但不是大小

4 个答案: