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

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 或类来严格定位所需的图像。在这种情况下，我添加了一个名为 round-images 的 id。删除“small-block-grid-1”和“medium-block-grid-3”类。

正文代码：

<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>

在没有你的类“small-block-grid-1 medium-block-grid-3”的情况下，我得到了这个工作。

Answer 2

不知道为什么不能使用 css。但似乎您不能，因此您可以使用内联样式将它们彼此相邻浮动。请记住，屏幕尺寸越小，图像就会变得非常小。

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

将此样式放在所有 元素上。中间的每边可能应该有 5% 的边距，以防止图像边缘相互接触。

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

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

你当然可以通过给 li 一个类并将它们向左浮动来对 css 做同样的事情。