Question

我有一个简单的问题，但无法解决它。我在网上搜索并阅读了大量不同的东西，但没有找到模态窗口的情况也不适用于我的情况。

我做了一个真正的灯箱，打开图像+其他一些元素我希望图像适合模态并调整其宽度/高度并保持比例。

也许我的所有

都有点迷失

height:100%

这是小提琴：http://jsfiddle.net/vrsap3hh/8/

一个想法？

谢谢＆amp;问候。

编辑：这是2个截图我有什么：http://hpics.li/5c32814 我想要的是：http://hpics.li/0ba4e07

图像可以是任何尺寸，纵向或横向。

Answer 1

试试这个

#editor .main 
        {
            padding: 0; //changed this
            max-width: 1580px;
            margin: 0 auto;
        }

#editor .main > header h1 {
        font-size: 25px;
        line-height: 44px;
        margin: 0;
        /* font-weight: 700; */
        color: #333;
        float: left;
        width: 100%;
        margin-bottom: 0px; //changed this
 }

Demo here

Answer 2

在.editorContent和#editorOverlay中将您的身高和宽度设置为自动并将溢出设置为hidden这里是fiddle - jquery 2.13不会在片段中运行

＆＃13;

$('#editorOverlay, #editorClose').on('click', function(event) {
    $("#editor, #editorOverlay").fadeOut(500);
});

$( '.showEditor').on('click', function(event) {
    $("#editor, #editorOverlay").fadeIn(500);
});

＆＃13;

#editor{
	display:none;
	line-height: 18px;
}

#editorClose {
    font-size: 20px;
}

.editorTextright {
    float: right;
}

.editorContent {
    position: absolute;
    top: 5%;
    left: 15%;
    width: 70%;
    height: 90%;
    padding: 16px;
    background-color: white;
    z-index:1002;
    overflow: auto;
}
#editorOverlay {
	display:none;
    background-color: rgba(0,0,0,.5);
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
}


#editor .support-note span{
	color: #ac375d;
	font-size: 16px;
	display: none;
	font-weight: bold;
	text-align: center;
	padding: 5px 0;
}

#editor .main {
	padding: 30px 20px 0px 20px;
	max-width: 1580px;
	margin: 0 auto;
}

#editor .main > header {
	padding: 0 10px 30px;
}

#editor .main > header h1 {
	font-size: 25px;
	line-height: 44px;
	margin: 0;
	/* font-weight: 700; */
	color: #333;
	float: left;
	width: 100%;
	margin-bottom: 50px;
}


#editor #content {
	/*width: 980px;*/
	/*width: 95%;*/
	width: 100%;
	margin: 0 auto;
	text-align: center;
}


#editor #photo{
    display: block;
    max-width: 100%;
    max-height: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><a href="javascript:;" class="showEditor">CONTENT</a></p>
<p><a href="javascript:;" class="showEditor">CONTENT</a></p>
<p><a href="javascript:;" class="showEditor">CONTENT</a></p>
<p><a href="javascript:;" class="showEditor">CONTENT</a></p>
<p><a href="javascript:;" class="showEditor">CONTENT</a></p>
<p><a href="javascript:;" class="showEditor">CONTENT</a></p>

＆＃13;

编辑（2）：

或者如果图片可以是任意尺寸，请尝试fiddle和result

＆＃13;

$('#editorOverlay, #editorClose').on('click', function(event) {
    $("#editor, #editorOverlay").fadeOut(500);
});

$( '.showEditor').on('click', function(event) {
    $("#editor, #editorOverlay").fadeIn(500);
});

＆＃13;

#editor{
	display:none;
	line-height: 18px;
}

#editorClose {
    font-size: 20px;
}

.editorTextright {
    float: right;
}

.editorContent {
    position: absolute;
    top: 5%;
    left: 15%;
    width: 70%;
    height: 90vh;
    padding: 16px;
    background-color: white;
    z-index:1002;
    overflow: hidden;
     border:1px solid #ccc;
}
#editorOverlay {
	display:none;
    background-color: rgba(0,0,0,.5);
    height: 90vh;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
   
}


#editor .support-note span{
	color: #ac375d;
	font-size: 16px;
	display: none;
	font-weight: bold;
	text-align: center;
	padding: 5px 0;
}

#editor #main {
	padding: 30px 20px 0px 20px;
	max-width: 1580px;
	margin: 0 auto;
}

#editor #main > header {
	padding: 0 10px 30px;
}

#editor #main > header h1 {
	font-size: 20px;
	line-height: 10px;
	margin: 0;
	/* font-weight: 700; */
	color: #333;
	float: left;
	width: 100%;
	margin-bottom: 20px;
}


#editor .content {
	/*width: 980px;*/
	/*width: 95%;*/
	width: 100%;
    max-height:90vh;
	margin: 0 auto;
	text-align: center;
}


#editor #photo{
    display: block;
    width: 100%;
    max-height:55vh;
    height:auto;
}
.stickerbox{margin-left:auto; margin-right:auto;}
.stickerbox img{width:100px; height:100px;}

＆＃13;

<script src="http://code.jquery.com/jquery-2.1.3.js"></script>

<p><a href="javascript:;" class="showEditor">CONTENT</a></p>
<p><a href="javascript:;" class="showEditor">CONTENT</a></p>
<p><a href="javascript:;" class="showEditor">CONTENT</a></p>

<p>...</p>
<p>...</p>


<div id="editorOverlay"></div>

<div id="editor">
	<div class="editorContent">
	
		<a href="javascript:;" class="editorTextright" id="editorClose"><i class="fa fa-times"></i></a>
	
		<div class="main">
		
			<header>
				<h1>MODAL</h1>
			</header>
			
			<div id="content">
				
				
                <img id="photo" src="http://dummyimage.com/1666x2500/000/fff"></img>
                
				<h2>Some text</h2>
				<div class="stickerbox">
                        <img class="sticker"  src="http://i.imgur.com/v93I3ZL.png" alt="" />
						<img class="sticker"  src="http://i.imgur.com/v93I3ZL.png" alt="" />
					    <img class="sticker"  src="http://i.imgur.com/v93I3ZL.png" alt="" />
				</div>
				
				<a class="create">Button</a>
            
		</div>
		
    </div>
    
</div>

＆＃13;

Answer 3

如果你发布整个代码，

会很棒！但没问题。如果我以正确的方式得到问题，我不会认为你能做的就是使用我现在列出的那些属性。

最大高度

最大宽度

最小高度最小宽度

以这种方式，你将控制你的声音所具有的最大尺寸，你的照片将完全适合你的灯箱。

如何将图像高度拟合到模态div

3 个答案:

最大宽度