正文 

当前位置： 首页 > 源码 >

响应式图像不适合手机屏幕

     2023-03-06     251

关键词：

【中文标题】响应式图像不适合手机屏幕【英文标题】：Responsive image won't fit mobile screen 【发布时间】：2016-07-18 06:04:16 【问题描述】：

我有一小段代码（它的一个 sn-p）。问题是，即使我使用媒体查询，图像也不适合屏幕。谁能告诉我如何解决这个问题，以适应屏幕？我使用的图像比屏幕大，所以它会在屏幕上移动，迫使人们水平滚动，这是不应该的 - 它应该自动适应屏幕。

这是我的代码：

.portfolio img 
    max-width: 100%;
    width: 100%;
    height: auto !important;



@media only screen and (min-width: 1025px)

	#myBackground
	
		min-height: 1000px;
	
	
	#produkter
	
		min-height: 1000px;
	
	.portfolio img 
        max-width: 440px;
        max-height: 440px;
    
	


@media only screen and (max-width: 1024px)

	#myBackground
	
		min-height: 800px;
	
	
	#produkter
	
		min-height: 800px;
	
	.portfolio img 
        max-width: 300px;
        max-height: 300px;
    
	
	


@media only screen and (max-width: 640px)

	#myBackground
	
		min-height: 600px;
	
	
	#produkter
	
		min-height: 600px;
	
	.portfolio img 
        max-width: 240px;
        max-height: 240px;
    
	
	


@media only screen and (max-width: 368px)

	#myBackground
	
		min-height: 500px;
	
	
	#produkter
	
		min-height: 500px;
	
	.portfolio img 
        max-width: 100px;
        max-height: 100px;
    
	
	

<head>
  <meta name="viewport" content="width=device-width">
</head>

<body>
<img class="portfolio" src="images/bock1.png"/>
</body>

【问题讨论】：

【参考方案1】：

你的问题是投资组合类在图像上，并且在代码中你有 .portfolio img 这意味着图像在具有类投资组合的 div 中，试试这个：

 <div class="portfolio">

    <img class="portfolio_img" src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg"/>

    </div>

只需从图像中删除类组合并将图像包装在具有类组合的 div 中，其他解决方案是放入您的 css

body .portfolio

改为

.portfolio img

【讨论】：

【参考方案2】：

您应该重写您的 CSS，因为以下内容不会针对您的图片：

.portfolio img

浏览器将尝试在父元素中使用 portfolio 类设置图像的样式

你应该重写你的 CSS 如下：

img.portfolio

以上将针对您的图像，该图像当前具有portfolio 类。

或者用一个投资组合类将图片包裹在一个元素中：

<div class="portfolio">
    <img src="">
</div>

在这种情况下，您现有的 CSS 将定位到您的图像。

【讨论】：

响应式设计 - 媒体查询 - 如何不加载某些图像

】响应式设计-媒体查询-如何不加载某些图像【英文标题】：Responsivedesign-MediaQueries-Hownottoloadcertainimages【发布时间】：2011-11-1504:08:36【问题描述】：好的，所以我使用媒体查询和display:none;设计了一个响应式布局，它不显示非常... 查看详情

手机不滚动网站的响应式设计

】手机不滚动网站的响应式设计【英文标题】：responsivedesignforwebsitenotscrollinginMobilephones【发布时间】：2013-01-2408:50:23【问题描述】：我正在设计一个响应式网站。它在桌面上运行良好，但是当我在手机上测试时，我无法滚动页... 查看详情

响应式设计：不同屏幕尺寸的不同图像

】响应式设计：不同屏幕尺寸的不同图像【英文标题】：Responsivedesign:differentimagesfordifferentscreensizes【发布时间】：2014-05-0507:12:16【问题描述】：我们的客户希望在小屏幕上显示与在大屏幕上不同的横幅图片。不仅缩小/拉伸以适... 查看详情

React Native - 响应式图像宽度（百分比？）

】ReactNative-响应式图像宽度（百分比？）【英文标题】：ReactNative-Responsiveimagewidths(percentages?)【发布时间】：2019-09-2417:01:09【问题描述】：我在RN应用程序中构建了一个响应式照片网格-我希望3张图片适合屏幕，并带有相应的边距... 查看详情

静态自适应流式响应式

...浏览效果不好，用户体验差（跨度可以说是从pc到手机）响应式 查看详情

如何在更改屏幕宽度的同时保持响应式背景图像高度？

】如何在更改屏幕宽度的同时保持响应式背景图像高度？【英文标题】：Howtomaintainresponsivebackgroundimageheightwhilechangingscreenwidth?【发布时间】：2021-10-0611:13:18【问题描述】：我一直在努力定位背景图像，但只有在网页窗口调整到其... 查看详情

响应式布局

响应式布局就是一套代码的开发能使得网页适应移动端和电脑端，响应式主要是根据屏幕的尺寸来改变网页的一些布局，但是缺点就是不适合有太复杂结构的网页在响应式里，我们需要在mate中加上适配移动端的代码<metaname="vie... 查看详情

手机/小屏幕的响应式 CSS

】手机/小屏幕的响应式CSS【英文标题】：ResponsiveCSSforphones/smallscreens【发布时间】：2012-08-3116:27:14【问题描述】：我正在尝试设置一个基本的响应式wordpress主题。首先，我从wordpress.org获取了工具箱主题并添加了twitterbootstraprespons... 查看详情

响应式图像裁剪

】响应式图像裁剪【英文标题】：ResponsiveImagecropping【发布时间】：2013-03-1505:26:19【问题描述】：我一直在尝试为宽度低于768像素的屏幕裁剪图像。图像应从左侧和右侧均匀裁剪。这是一个完整尺寸的图像示例（图像的尺寸是900... 查看详情

Bootstrap 4 模态中的 Cloudinary 响应式图像以适应移动屏幕

】Bootstrap4模态中的Cloudinary响应式图像以适应移动屏幕【英文标题】：CloudinaryresponsiveimageinBootstrap4modaltofitmobilescreen【发布时间】：2020-12-0621:54:46【问题描述】：我想在Bootstrap4模式弹出窗口中使用Cloudinary图像。模态弹出窗口在桌... 查看详情

在响应式图像上使用 jcrop

】在响应式图像上使用jcrop【英文标题】：Usingjcroponresponsiveimages【发布时间】：2012-11-1820:20:34【问题描述】：由于jcrop现在在触摸屏上工作，我想做一个使用它的网络应用程序。我已经完成了所有工作，但是如果我尝试使设计具... 查看详情

响应式对齐、浮动和居中图像

】响应式对齐、浮动和居中图像【英文标题】：Aligning,floatingandcenteringimagesresponsively【发布时间】：2013-02-2600:17:51【问题描述】：我正在尝试弄清楚如何编写HTML和CSS代码以使3个屏幕截图图像对齐，如下面的屏幕截图所示。这个... 查看详情

如何制作响应式 svg -flutter

】如何制作响应式svg-flutter【英文标题】：Howtomakeresponsivesvg-flutter【发布时间】：2021-10-0421:41:24【问题描述】：获得响应式svg图片的最佳方法是什么，我曾考虑过使用MediaQuery，但它可能并不完全适合每个屏幕。我使用了堆栈和定... 查看详情

使用响应式布局从画布中捕获分段图像

】使用响应式布局从画布中捕获分段图像【英文标题】：Capturingasectionedimagefromacanvaswithresponsivelayout【发布时间】：2021-07-1606:22:08【问题描述】：我有一个带有各种div元素的画布，这些元素用作表示要捕获的画布区域的框。当捕... 查看详情

Google Drive Picker (JavaScript) 不适合移动设备/响应式

】GoogleDrivePicker(JavaScript)不适合移动设备/响应式【英文标题】：GoogleDrivePicker(JavaScript)notmobilefriendly/responsive【发布时间】：2015-11-0206:54:18【问题描述】：15年11月-仍在寻找解决方案。我正在使用GooglePickerAPIhttps://developers.google.com/p... 查看详情

响应式 Bootstrap Jumbotron 背景图像

】响应式BootstrapJumbotron背景图像【英文标题】：ResponsiveBootstrapJumbotronBackgroundImage【发布时间】：2014-03-2621:10:53【问题描述】：我正在使用bootstrapjumbotron，并包含背景图片。调整屏幕大小会使图像平铺并重复，而我希望图像能够... 查看详情

移动端h5页面设计

参考技术A1、为什么要做移动端H5页面？响应式页面为了适应不同的终端设备而产生，体验较好，可以自动识别屏幕宽度以改变布局形式。但是不是所有的网站都适合做成响应式，如淘宝等一些大型网站做响应式开发难度大，响... 查看详情

有条件地为响应式设计加载图像

】有条件地为响应式设计加载图像【英文标题】：conditionallyloadimagesforresponsivedesigns【发布时间】：2013-06-1910:00:42【问题描述】：我正在为现有网站改造自适应布局。基本上在500像素时，网站会更改为100%宽度的移动样式布局。通... 查看详情