无法使用CSS调整图片大小 [英] Can't resize image using CSS

查看:384
本文介绍了无法使用CSS调整图片大小的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我尝试了在所有可以找到的所有站点上都能找到的所有答案,但是仍然无法使用CSS正确调整图像的大小.我已经将它放在一个div中,并尝试调整其中一个的大小并同时调整两者的大小.我正在尝试使图像(在导航栏下方)适合页面(即:与页面一样宽,以及相对高度).

I've tried every answer I could find on all the sites I could find, but still haven't been able to properly resize an image using CSS. I've got it inside a div, and tried resizing either one and resizing both. I'm trying to fit the image (underneath my navigation bar) to the page (meaning: as wide as the page, and relative height).

<div id="banner"><img src="resources/img/banner.png" class="myImage"></div>

第一次尝试:

.myImage{
    max-width: 100%;
    height: auto;
    left: 0px;
    right: 0px;
}

第二次尝试:

#banner{
    max-width: 100%;
    height: auto;
    left: 0px;
    right: 0px;
}

第三次尝试:

<div id="banner"><img src="resources/img/banner.png" id="myImage"></div>

#banner{
    max-width: 100%;
    height: auto;
    left: 0px;
    right: 0px;
}

#myImage{
    max-width: 100%;
    height: auto;
    left: 0px;
    right: 0px;
}

推荐答案

如果图像小于屏幕,它将使用图像宽度.如果更大,则使用最大宽度.因此,假设您的图像小于显示器,则需要将最大宽度"更改为宽度"以增加图像尺寸.

If your image is smaller than the screen, it will use the image width. If it is bigger, it uses max-width. So assuming your image is smaller than the display, you want to change your "max-width" to "width" to increase the image size.

<div id="banner"><img src="resources/img/banner.png" id="myImage"></div>

#banner{
    max-width: 100%;
    height: auto;
    left: 0px;
    right: 0px;
}

#myImage{
    width: 100%;
    height: auto;
    left: 0px;
    right: 0px;
}

这篇关于无法使用CSS调整图片大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆