Question

我正在使用'Aqua Resizer'（aq_resizer.php）在我的Wordpress网站上调整缩略图的大小。我的帖子来自//Data buffers FloatBuffer vertexBuffer = GLBuffers.newDirectFloatBuffer(this.coordCount); vertexBuffer.put(Vertices); vertexBuffer.rewind(); IntBuffer indexBuffer = GLBuffers.newDirectIntBuffer(this.indexCount); indexBuffer.put(index); indexBuffer.rewind(); //setting up the VBO int nVBO = 2; int[] VBO = new int[nVBO]; gl.glGenBuffers(nVBO, VBO,0); gl.glBindBuffer(GL.GL_ARRAY_BUFFER, VBO[0]); gl.glBindBuffer(GL.GL_ELEMENT_ARRAY_BUFFER,VBO[1]); gl.glBufferData(GL.GL_ARRAY_BUFFER, this.coordCount*Float.SIZE, vertexBuffer, GL.GL_STATIC_DRAW); gl.glBufferData(GL.GL_ELEMENT_ARRAY_BUFFER, this.indexCount*Integer.SIZE, indexBuffer, GL.GL_STATIC_DRAW); gl.glBindBuffer(GL.GL_ARRAY_BUFFER, VBO[0]); gl.glBindBuffer(GL.GL_ELEMENT_ARRAY_BUFFER, VBO[1]); gl.glEnableClientState(GLPointerFunc.GL_VERTEX_ARRAY); gl.glVertexPointer(3, GL.GL_FLOAT, 0, 0); //gl.glVertexPointer(3, GL.GL_FLOAT, 0, vertexBuffer); //gl.glDrawArrays(GL.GL_TRIANGLE_STRIP, 0, 4); gl.glDrawElements(GL.GL_TRIANGLES, this.indexCount, GL.GL_UNSIGNED_INT, 0); //gl.glDrawElements(GL.GL_TRIANGLES, this.indexCount, GL.GL_UNSIGNED_INT, indexBuffer); gl.glDisableClientState(GLPointerFunc.GL_VERTEX_ARRAY); gl.glBindBuffer(GL.GL_ARRAY_BUFFER, 0); gl.glBindBuffer(GL.GL_ELEMENT_ARRAY_BUFFER, 0);中的循环

single.php

这来自<?php get_template_part( 'content', 'single' ); ?>，其中包含我的帖子的代码

HTML

content-single.php

一切正常（缩放器功能适用于<div id="post-<?php the_ID(); ?>" <?php post_class('col-md-12'); ?> > <div> <h2><?php the_title(); ?></h2> <h3><?php the_category(', '); ?></h3> <?php the_content(); ?> </div> <?php $thumb = get_post_thumbnail_id(); $img_url = wp_get_attachment_url( $thumb,'full' ); //get full URL to image (use "large" or "medium" if the images too big) $image = aq_resize( $img_url, 1200, 720, true ); //resize & crop the image ?> <?php if($image) : ?> <img class="img-responsive" src="<?php echo $image ?>"/> <?php endif; ?> </div>引入的精选帖子。图像在窗口调整大小时向上/向下缩放

效果有效，因为<?php the_content(); ?>已应用于帖子的特色图片。

我在帖子的内容中有图片。我希望他们以同样的方式行事（现在他们刚刚以原始大小加入）我需要将班级class="img-responsive"应用于img-responsive

中的图片

Answer 1

将CSS类应用于图像可以在帖子本身内完成，只需编辑图像并放入CSS类img-responsive即可。

如果您无法编辑/修改帖子（或者工作太多），那么第二个选项是在主题的自定义function.php文件中编写一个小代码片段（仅当您在你的循环中显示帖子）：

<?php
the_post_thumbnail('thumbnail', array('class' => 'img-responsive'));

有关详细信息，请参阅https://codex.wordpress.org/Function_Reference/the_post_thumbnail。

第三个选项是在header.php文件中使用jQuery，这样页面上的所有图像都会获得响应式课程（但这可能不是您想要的，特别是如果您有背景，徽标，菜单图像等等，它需要在客户端的浏览器中启用JavaScript：

<script type="text/javascript">
jQuery(function() {
  jQuery(img).addClass('img-responsive');
});
</script>

我能想到的最后一个选项是使用纯CSS：

.content img { height: auto; max-width: 100%; }

.content是包含帖子内容的区域。

注意：您可能还希望覆盖.wp-caption类。

.wp-caption { width: auto !important; }

定位内容图像以进行响应大小调整

1 个答案: