-1
Мне сложно выполнить указанный выше код. Я надеялся, что кто-то может указать мне в правильном направлении. Я не могу получить изображения в масштабе, где они поддерживают соотношение при заполнении всей коробки. Поэтому я пытаюсь использовать javascript для определения размеров. Моя проблема в том, что я новичок в java, и я думаю, что я каким-то образом внедряю ее. Может кто-нибудь, пожалуйста, скажите мне, что я делаю неправильно.Как правильно реализовать jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="_jquery/jquery-1.10.2.min.js"></script>
</head>
<body>
<div class="gallery_item">
<article class="piece">
<div class="piece-image">
<figure> <img src="_img/prod/22.jpg" alt="asdf"> </figure>
</div>
<section class="piece-title">
<div class="piece-title-text">
<h6>Title of piece</h6>
<h5>by Artists Name</h5>
<p><img src="_img/magnifyingGlass.png" width="283" height="417" alt="enlarge"></p>
<p>ENLARGE</p>
<h3>$600 - $1200</h3>
<p>View details of this print</p>
</div>
</section>
</article>
</div>
<script>$(".piece_image img").each(function(){
var thisWidth = $(this).width();
var thisHeight = $(this).height();
if(thisWidth > thisHeight) {
$(this).css("width", "auto");
$(this).css("height", "100%");
} else if(thisHeight > thisWidth) {
$(this).css("width", "100%");
$(this).css("height", "auto");
}
}); </script>
---css---
.piece-image {
width: 100%;
float: left;
position:relative;
display: block;
height: 200px;}
.piece-image figure {
display: block;
position: relative;
text-align: center;
vertical-align:middle;
margin: 0 auto;
height: 200px;
overflow: hidden;
top: 0;
z-index: 1;}
.piece-image figure img {
vertical-align:middle;
position:absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index:1;}
Почему вы загружаете две разные версии jQuery? – melancia
Вы запрашиваете '.piece_image', но ваше имя класса' штук-изображение' – weiglt
Название вопроса вводит в заблуждение. – rorypicko