切換到移動版本時影像消失我將共享代碼以解決問題，求解器將獲得聲譽并且答案將被標記為解決方案
此處的最小可重現示例：
這是移動版本，它消失了我需要它看起來更小，將共享代碼，
html:
<section class="inicioEmpresa wow fadeInLeftBig data-wow-delay="0.4s"">
<div class="inicioEmpresaInfo">
<div class="empresa">
<div class="empresaImg">
<div class="wow bounceInLeft" data-wow-delay="0.3s"><img src="images/home/home-2.png" alt=""></div>
</div>
<div class="inicioEmpresaTxt wow fadeInUp" data-wow-delay="0.3s">
<h1 class="color">RADISOL M.X.</h1>
<h1 class="color">Más de 20 a?os de trayectoria.</h1>
<p>Somos especialistas en las soluciones integrales de los problemas del sistema de enfriamiento de
automotores y maquinaria pesada, ofreciendo al cliente el mayor abanico de posibilidades para
abastecer todas sus necesidades.</p>
</div>
</div>
</div>
</section>
css：您可以使用 f12 或 chrome 或 mozilla 的元素檢查器查看，這是顯示應用于此類影像的元素的螢屏截圖：
應用于影像的 css 代碼：
@media screen and (max-width: 1366px)
.empresaImg div img {
width: 95%;
}
.empresaImg div img {
width: 100%;
border-radius: 5%;
}
也看到了這一點，當您在 >element inspector > mobile icon click > resize from 488 x 625 screen（影像將出現）中更改解析度時，但當我從 488 x 625 更改為 480 x 625 時，影像將消失！
仍然出現
影像消失
how to make it not dissapear and make it responsive for mobile version?
edit: tried this but did not worked:
@media screen and (max-width: 768px) {
.empresaImg div img {
width: 100px;
height: 100px;
}
}
problem solving answer will be upvoted and earned rep
also tried this: https://www.w3schools.com/howto/howto_css_image_responsive.asp
.empresaImg div img {
width: 100%!important;
height: auto!important;
}
but did not worked still disappearing in < = 480px resolutions
here is the responsive css in charge of making it responsive, i do not know where is the error also tried to forcing the image to be 100x100 px and in resolutions below width of 480 it breaks:
https://clever-curie-f9c77b.netlify.app/css/responsive.css
uj5u.com熱心網友回復：
你的問題在這里：
@media screen and (max-width: 480px) {
.inicioEmpresaInfo .empresaImg {
display: none;
}
}
在這個大小下，empresaImg（影像的容器）變得隱藏
uj5u.com熱心網友回復：
嘗試在 CSS 中提供影像填充和/或邊距：
@media screen and (max-width: 1366px)
.empresaImg div img {
width: 95%;
padding: 25px 25px 25px 25px;
}
這可能會強制影像適合螢屏。否則，您將需要考慮根據螢屏尺寸有條件地渲染不同尺寸的影像。在這里查看答案。 如果螢屏不夠寬，如何使用 CSS 有條件地調整影像大小？
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/449275.html