关于图像大小调整（视口）的几个问题

时间：2018-01-13 18:43:47

标签： javascript css image

关于我的图片在我的网站上如何对齐，我遇到了一些问题。

 1.我希望图像从左侧和右侧具有相等的间距，意味着居中，因为目前当您使浏览器变小时，右侧比左侧大得多。

 2.此外，当我使浏览器变小时，页面重新排列很好，但是当我在移动设备上查看它时，它是非常不同的。  

您可以在https://codepen.io/anon/pen/mpKvMx找到我的代码 

$("#myinput").keyup(function() {
    var val = $.trim(this.value);
    if (val === "")
        $('img').show();
    else {
        $('img').hide();
        val = val.split(" ").join("\\ ");
        console.log(val)
        $("img[alt*=" + val + " i]").show();
    }
});

$(".img").wrap('<div class="alt-wrap"/>');

$(".img").each(function() {
    $(this).after('<p class="alt">' + $(this).attr('alt') + '</p>');
  })
   
h1 {
	color: red;
}	
h2 {
	color:red;
}
p {
	font-family: Arial;
}
body {
	background-color: grey;
}
div { 
	text-align: justify; 
}
div img {
	display: inline-block;
	width: auto;
	max-height: 200px;
	height: auto; 
}

 input[type=text] {
    width: 130px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
    width: 100%;
}
	
.alt-wrap { 
      display: block;
      position: relative;
      margin: 20px;
      color: whitesmoke;
      border: 1px solid mediumorchid;
}

.alt-wrap p.alt {
      position: absolute;
      opacity: 0; /* hide initially */
      left: 0; right: 0; bottom: 0;
      margin: 0;
      padding: 15px;
      font-size: 14px;
      line-height: 22px;
      background-color: rgba(0,0,0,0.8);
      transition: all 300ms ease;
      transition-delay: 300ms;
}

.alt-wrap:hover > p.alt { 
      opacity: 1; 
      transition-delay: 0s;
}
    
.imgContainer{
    float:left;
}
img {
width: 200px !important; 

}
body {
background: white !important; 
}
.imgContainer {
  position: relative;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.5);
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
}

.imgContainer:hover .overlay {
  width: 100%;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.dl {
margin-top: 400px; 
}
<html>
	<title>Title</title>
	<head>
		<link href="style.css" type="text/css" rel="stylesheet" />
		<h1 align=center>Heading</h1>
		<h2 align=center>Sub-Heading</h2>
		<script   src="https://code.jquery.com/jquery-3.2.1.min.js"   integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="   crossorigin="anonymous"></script>
		<input type="text" id="myinput" name="search" placeholder="Search.." style="border-radius: 4px;">
	</head>
	
	<br>
	<br>
	<body>
	
<div class="image123">
    <div class="imgContainer">
        <a href="cryptos/generic.html"><img src="https://i.warosu.org/data/biz/img/0063/87/1515861781137.png" alt="Bitcoin"><div class="overlay"><div class="text">Bitcoin</div></div></a>
    </div>
    <div class="imgContainer">
         <a href="https://example.com"><img src="https://upload.wikimedia.org/wikipedia/commons/b/b7/ETHEREUM-YOUTUBE-PROFILE-PIC.png" alt="Ethereum"><div class="overlay"><div class="text">Ethereum</div></div></a>
    </div>
    <div class="imgContainer">
         <a href="https://example.com"><img src="https://www.profitconfidential.com/wp-content/uploads/2018/11/ripple-icon-1-300x300.png" alt="Ripple"><div class="overlay"><div class="text">Ripple</div></div></a>
    </div>
    <div class="imgContainer">
         <a href="https://example.com"><img src="http://199.180.133.206/img/Bitcoin_Cash.png" alt="Bitcoin Cash"><div class="overlay"><div class="text">Bitcoin Cash</div></div></a>
    </div>
    <div class="imgContainer">
         <a href="https://example.com"><img src="http://199.180.133.206/img/ada.png" alt="Cardano"><div class="overlay"><div class="text">Cardano</div></div></a>
    </div>
    <div class="imgContainer">
        <a href="https://example.com"><img src="http://199.180.133.206/img/NEM.png" alt="NEM"> <div class="overlay"><div class="text">NEM</div></div></a>
    </div>
    <div class="imgContainer">
         <a href="https://example.com"><img src="http://199.180.133.206/img/Litecoin.png" alt="LiteCoin"><div class="overlay"><div class="text">LiteCoin</div></div></a>
    </div>
    <div class="imgContainer">
          <a href="https://example.com"><img src="http://199.180.133.206/img/stellar.png" alt="Stellar Lumens"><div class="overlay"><div class="text">Stellar Lumens</div></div></a>   
    </div>
	<div class="imgContainer">
          <a href="https://example.com"><img src="http://199.180.133.206/img/iota.png" alt="IOTA"><div class="overlay"><div class="text">IOTA</div></div></a>   
    </div>
	<div class="imgContainer">
          <a href="https://example.com"><img src="http://199.180.133.206/img/dash.png" alt="Dash"><div class="overlay"><div class="text">Dash</div></div></a>   
    </div>
	<div class="imgContainer">
          <a href="https://example.com"><img src="http://199.180.133.206/img/neo.png" alt="NEO"><div class="overlay"><div class="text">NEO</div></div></a>   
    </div>
	<div class="imgContainer">
          <a href="https://example.com"><img src="http://199.180.133.206/img/tron.png" alt="Tron"><div class="overlay"><div class="text">Tron</div></div></a>   
    </div>
	<div class="imgContainer">
          <a href="https://example.com"><img src="http://199.180.133.206/img/monero.png" alt="Monero"><div class="overlay"><div class="text">Monero</div></div></a>   
    </div>
	<div class="imgContainer">
          <a href="https://example.com"><img src="http://199.180.133.206/img/eos.png" alt="EOS"><div class="overlay"><div class="text">EOS</div></div></a>   
    </div>
	<div class="imgContainer">
          <a href="https://example.com"><img src="http://199.180.133.206/img/icon.png" alt="ICON"><div class="overlay"><div class="text">ICON</div></div></a>   
    </div>
	<div class="imgContainer">
          <a href="https://example.com"><img src="http://199.180.133.206/img/bitcoingold.png" alt="Bitcoin Gold"><div class="overlay"><div class="text">Bitcoin Gold</div></div></a>   
    </div>
	<div class="imgContainer">
          <a href="https://example.com"><img src="http://199.180.133.206/img/qtum.svg" alt="QTUM"><div class="overlay"><div class="text">QTUM</div></div></a>   
    </div>
	<div class="imgContainer">
          <a href="https://example.com"><img src="http://199.180.133.206/img/ethereum_classic.png" alt="Ethereum Classic"><div class="overlay"><div class="text">Ethereum Classic</div></div></a>   
    </div>
	<div class="imgContainer">
          <a href="https://example.com"><img src="http://199.180.133.206/img/raiblocks.png" alt="RaiBlocks"><div class="overlay"><div class="text">RaiBlocks</div></div></a>   
    </div>
	<div class="imgContainer">
          <a href="https://example.com"><img src="http://199.180.133.206/img/lisk.png" alt="Lisk"><div class="overlay"><div class="text">Lisk</div></div></a>   
    </div>
	<div class="imgContainer">
          <a href="https://example.com"><img src="http://199.180.133.206/img/verge.png" alt="Verge"><div class="overlay"><div class="text">Verge</div></div></a>   
    </div>
	<div class="imgContainer">
          <a href="https://example.com"><img src="http://199.180.133.206/img/omisego.png" alt="OmiseGo"><div class="overlay"><div class="text">OmiseGO</div></div></a>   
    </div>
    
</div><br>

	</body>
</html>

1 个答案:

答案 0 :(得分：0)

1）您只需将以下css添加到要水平对齐的元素：margin: 0 auto;

2）使用媒体查询，例如你可以：

    移动设备上的
  • ：所有图像堆叠在一起（图片容器上可能需要width:100%）
  • 用于更宽的视口：代码示例中的内联图像

如果您对媒体查询不满意，请参阅以下示例：https://codepen.io/TrentWalton/pen/kqxDy。

相关问题
最新问题