Question

在我拥有的网站上，我只能将代码输入到正文和页脚中。

该网站是bothellhomes.com。主页显示三个圆形图像。在移动设备上，我想调整图像的大小，使它们水平显示。现在，由于图像太大，它们会垂直移动。

正文代码：

<section class="three-widgets">
<ul class="small-block-grid-1 medium-block-grid-3 text-center">
<li><a title="Advanced Search" href="/search/advanced_search/"><img src="https://u.realgeeks.media/lookinwa/advancedsearch.png" alt="Advanced Search" width="300" height="300" /></a></li>
<li><a title="Interactive Map Search" href="/map_search/results/9k/1/#/?city=Kenmore&city=Bothell&city=Kirkland&city=Woodinville&city=Bellevue&city=Lynnwood&city=Mill%20Creek&city=Redmond&page=1&list_price_max=800000&per_page=100&type=res&type=con&list_price_min=250000"><img src="https://u.realgeeks.media/lookinwa/mapsearch.png" alt="Interactive Map Search" width="300" height="300" /></a></li>
<li><a title="What's My Home Worth?" href="/cma/property-valuation/"><img src="https://u.realgeeks.media/lookinwa/homevaluation.png" alt="Home Value" width="300" height="300" /></a></li>
</ul>
</section>

页脚代码：

<script>// <![CDATA[
document.write("<style>.three-widgets {margin-top: -60px;}.three-widgets img {background: #fff;border: 1px solid #ddd;border-radius: 100%;padding: 5px;}.three-widgets p {color: #000}.three-widgets li img {     opacity: .9;-webkit-transition: all 0.3s ease-out;     -moz-transition: all 0.3s ease-out;     -o-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}.three-widgets li:hover img {border: 1px solid #444444;opacity: 1; -webkit-transform: scale(1.1);-moz-transform: scale(1.1);-ms-transform: scale(1.1);transform: scale(1.1);}@media (max-width:767px) {.three-widgets {     margin-top: 0}}h1{ line-height:38px!important}</style>");
// ]]></script>

Answer 1

你应该首先考虑移动。将样式应用于移动版本的图像，然后使用媒体查询覆盖它们以进行桌面查看。

您可能希望添加ID或类以严格定位所需的图像。在这种情况下，我添加了一个名为圆形图像的ID。删除类＆＃34; small-block-grid-1＆＃34;和＆＃34; medium-block-grid-3＆＃34;。

正文代码：

<section class="three-widgets" id="round-images">
<ul class="text-center">
<li><a title="Advanced Search" href="/search/advanced_search/"><img src="https://u.realgeeks.media/lookinwa/advancedsearch.png" alt="Advanced Search" width="300" height="300" /></a></li>
<li><a title="Interactive Map Search" href="/map_search/results/9k/1/#/?city=Kenmore&city=Bothell&city=Kirkland&city=Woodinville&city=Bellevue&city=Lynnwood&city=Mill%20Creek&city=Redmond&page=1&list_price_max=800000&per_page=100&type=res&type=con&list_price_min=250000"><img src="https://u.realgeeks.media/lookinwa/mapsearch.png" alt="Interactive Map Search" width="300" height="300" /></a></li>
<li><a title="What's My Home Worth?" href="/cma/property-valuation/"><img src="https://u.realgeeks.media/lookinwa/homevaluation.png" alt="Home Value" width="300" height="300" /></a></li>
</ul>
</section>

接下来，使用CSS为您的移动设备设置图像样式。由于您无法访问标题，因此您可以通过内联CSS或我在下面使用嵌入式CSS显示该限制。最后，添加媒体查询以重置之前的样式。这是一个想法：

<style>
/* the following controls image size */
#round-images img{
    max-width:100px;
    max-height:100px;
};
@media (min-width: 768px) {
    #round-images img{
        max-width:300px;
        max-height:300px;
    };
}
/* the following will remove the vertical stacking */
#round-images ul li{
    float:left;
    width:33%;
};
</style>

我的工作没有你的课程和＃34;小块网格1中型块网格3＆＃34;。

Answer 2

不确定为什么你不能使用css。但似乎你不能这样你可以使用内联样式只是将它们彼此相邻浮动。请记住，屏幕尺寸越小，它就会变成非常小的图像。

<li style="float:left;width="30%">

将这种风格放在所有＆lt; li>元素。并且中间的每边应该有5％的边距，以防止图像边缘相互接触。

 <li style="float:left;width="30%;margin:0 5%;">

你还需要删除图像的高度，只需将图像的宽度设置为100％，这样它就会伸展到它的容器边缘，即li。

你当然可以用css做同样的事情，让li是一个类并将它们向左浮动。

我想仅在移动设备上调整我网站上的某些图片大小

2 个答案: