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

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 为移动设备设置所需的图像样式。由于您无权访问 header ，因此您可以通过内联 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>

我在没有你的类(class)“small-block-grid-1 medium-block-grid-3”的情况下完成了这项工作。