我只想在移动设备上调整网站上某些图像的大小-请参见代码 [英] I want to resize certain images on my site ONLY on mobile - see code

问题描述

好的.因此，在网站上，我只能将代码输入到正文和页脚中.

该网站是bothellhomes.com.主页显示了三个圆形图像.在移动设备上，我想调整图像的大小，使其水平显示.现在，由于图像非常大，因此它们会垂直移动.请帮助它使我发疯！谢谢.

正文代码:

Ok. So on the website I have I can only input code into the body and the footer.

The website is bothellhomes.com. The homepage shows three round images. On a mobile device, I want to resize the images so they show horizontally. Right now, since the images are so large, they go vertically. Please help it''s driving me crazy! Thank you.

Body code:

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

页脚代码:

Footer code:

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

我尝试过的事情:

从添加另一个@media代码以缩小屏幕尺寸的一切.

What I have tried:

Everything from adding another @media code for smaller screen sizes. It doesn''t work!

推荐答案

在您的媒体查询中，为图像提供较小的高度和宽度.

On your media query give your image a smaller height and width.

@media only screen and (max-width: enter your value) {
    .three-widgets img {
        height: preferred height; 
        width : preferred width;
    }
}

这篇关于我只想在移动设备上调整网站上某些图像的大小-请参见代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！